<template>
	<Layout>
		<!--<remote-hand-sign class="handsign"></remote-hand-sign>-->
		<screensharemark class="screenmark" v-show="showScreenMarkView" @closescreenmark="closeScreenMark" :writingShow="writingShow"></screensharemark>
		<Header style="background-color: rgba(44, 137, 234, 1);padding-right:16px;">
			<audio src="static/ring.wav" loop id="ringaudio"></audio>
			<div class="screenmark-box">
				<watermark-replacebackground :width="resolution.width" :height="resolution.height" :aitype="aitype" :resolution="resolution" :isAddWatermark="isAddWatermark" :isReplaceBackground="isReplaceBackground" :Red="Red" :Green="Green" :Blue="Blue" ref="wmrbg"> </watermark-replacebackground>
				<div class="headtitle" @click="switchModule('callService')">
					{{ $t('ivcs.callService') }}
					<span class="horizontalline" v-show="module == 'callService'"></span>
				</div>
				<div class="headtitle" v-if="isShowManagerCenter" @click="switchModule('managerCenter')">
					{{ $t('ivcs.managerCenter') }}
					<span class="horizontalline" v-show="module == 'managerCenter'"></span>
				</div>
				<div class="headtitle" v-if="isShowFormData" @click="switchFormData('formData')">
					{{ $t('ivcs.formData') }}
					<span class="horizontalline" v-show="module == 'formData'"></span>
				</div>

				<!-- <img src="../../static/images/setting.png" class="setting" @click="showSettingView=!showSettingView"> -->
				<div class="headset">
					<button class="headset-btn" @click="exitSystem">{{ $t('ivcs.exitSystem') }}</button>
					<div class="headsetImg">
						<img src="../../static/images/headImage.png" alt="" />
						<div class="baseinfo">
							<span>{{ $t('ivcs.number') }}:{{ agentId }}</span>
							<div v-show="groupsItems">
								<span>{{ $t('ivcs.groups') }}:</span>
								<span v-for="(group, index) in groupsItems" :key="group.id">
									{{ group.name }}
									<i v-show="index !== groupsItems.length - 1"></i>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="toast">
					<img src="../../static/images/ring.png" alt="" />
					<span>{{ $t('ivcs.hiOperator') }}{{ operatorName }}!</span>
				</div>

				<!-- <headop class="z-headop"  :agent-status="agentStatus"  :sessionId="sessionId" :audioMuted="audioMuted"
                :appointValue="appointValue" @checkIn="checkIn"  @checkOut="checkOut"
                @login="loginAms" @otherWork="otherWork" @appoint="appoint"  @audioControl="audioControl"
                @logout="logoutAms" @ready="ready" @unready="unready"  @exitSystem="exitSystem"
        ></headop> -->

				<Modal v-model="onRing" :closable="false" :mask-closable="false" :title="$t('ivcs.confirm')" :ok-text="$t('ams.answer')" :cancel-text="$t('ams.reject')" @on-ok="answerCall" @on-cancel="rejectCall">
					<div style="font-size: 14px">{{ getArrageCustomerTips }}</div>
				</Modal>

				<!--收集用户信息-->
				<Modal v-model="showCollectionInfoView" :closable="false" :mask-closable="false" :title="$t('ivcs.collectcustomerinfo')">
					<userinfo ref="Userinfo"></userinfo>
					<div slot="footer">
						<Button type="default" size="default" @click="showCollectionInfoView = false">{{ $t('ivcs.No') }}</Button>
						<Button type="info" size="default" style="background:rgba(58,152,255,1);" @click="collectCustomerInfo">{{ $t('ivcs.Yes') }}</Button>
					</div>
				</Modal>

				<!--访客的屏幕共享信息-->
				<Modal v-model="showCustomerScreenView" :closable="false" :mask-closable="false" :width="customerScreenSize.width * 1.4" :title="$t('ivcs.seeCustomerScreen')">
					<customer-screen ref="customerScreen" @screenPoint="screenPoint" :width="customerScreenSize.width" :height="customerScreenSize.height"></customer-screen>
					<div slot="footer">
						<Button class="close" type="info" size="default" @click="showCustomerScreenView = false">{{ $t('ivcs.close') }}</Button>
						<Button class="stop" type="error" size="default" @click="releaseScreen">{{ $t('ivcs.stopViewScreen') }}</Button>
					</div>
				</Modal>

				<!--音视频互转-->
				<Modal v-model="showImposeMediaTypeView" :closable="false" :mask-closable="false" :title="$t('ivcs.confirmAppear')">
					<AppearCamera ref="outOfMirror"></AppearCamera>
					<div slot="footer">
						<Button type="default" size="default" @click="showImposeMediaTypeView = false">{{ $t('ivcs.No') }}</Button>
						<Button type="info" id="“impose_media”" style="background:rgba(58,152,255,1);" size="default" @click="imposeMedia">{{ $t('ivcs.Yes') }}</Button>
					</div>
				</Modal>
				<!-- 三方 -->
				<Modal v-model="isShowTransfer" :closable="false" :mask-closable="false">
					<Transfer ref="Transfer" :bizScenarios="searchAgentBindBizScenario" @changeAgentId="changeAgentId"></Transfer>
					<div slot="footer">
						<Button type="default" size="default" @click="isShowTransfer = false">{{ $t('ivcs.No') }}</Button>
						<Button type="info" size="default" :disabled="searchAgentBindBizScenario.length === 0 || !getBizScenarioId" :class="searchAgentBindBizScenario.length ? 'disable' : 'active'" @click="startInviteOtherAgent">{{ $t('ivcs.Yes') }}</Button>
					</div>
				</Modal>
			</div>

			<!-- <settings class="settingview"
                @addbackgroup="setBackground"
                @addwater="setWatermark"
                @close="showSettingView=false"
                v-show="showSettingView">
      </settings> -->
		</Header>

		<div class="videoshow" ref="div" v-show="module == 'callService'">
			<Row type="flex" justify="start" style="width: 100%">
				<div id="cameraView">
					<video id="cameraVid" autoplay hidden style="display:none"></video>
					<audio id="cameraAid" autoplay hidden></audio>
				</div>
				<div id="customerview" style="width: 60%;overflow:hidden;height:360px">
					<div v-show="!showCustomerView" class="defaultcustomer">
						<img src="../../static/images/renwu.png" class="customerrenwu" />
					</div>
					<div v-show="showCustomerView && callMediaType == 'audio'" class="defaultcustomer">
						<img src="../../static/images/voiceBig.png" class="default_customer_voice" />
					</div>
					<canvas id="customerCanvas" :width="customerVideoViewWidth" height="350" class="customervideo" v-show="false"></canvas>
					<video :class="callMediaType != 'audio' ? 'customervideo' : 'customer_video_hidden'" playsinline controls autoplay id="customer" v-show="showCustomerView"></video>
					<audio class="customer_video_hidden" playsinline controls autoplay id="customer_voice" muted="false" v-show="receiveMediaType == 'audio'"></audio>
				</div>

				<div class="otherStream">
					<div v-for="item in agentStreams" :key="item.id" style="position:relative" class="otherStreamContent">
						<video :class="receiveMediaType == 'audio' ? 'agent_voice_img' : 'otherStreamvideo'" :style="{ display: item.audioOnly ? 'none' : 'block' }" playsinline autoplay controls :id="item.id" :muted="item.id.substr(5) === agentId ? true : false"></video>
						<div class="kick" :id="item.id + 'kick'" @click="removeAgent(item)" v-show="isKickPerson && item.id != 'agent' + operatorName && item.id.indexOf('screen') === -1">
							{{ $t('ivcs.removeAgent') }}
						</div>
						<div class="backdemon" v-show="isKickPerson && item.id != 'agent' + operatorName && item.id.indexOf('screen') === -1" :id="item.id + 'back'"></div>
						<img src="../../static/images/voice@1x.png" class="agent_voice_img" v-show="receiveMediaType == 'audio'" />
					</div>
					<div v-show="agentStreams.length === 0" class="defaultagent">
						<div class="agentdiv">
							<img src="../../static/images/renwu.png" class="agentrenwu" />
						</div>
						<div class="agentdiv">
							<img src="../../static/images/renwu.png" class="agentrenwu" />
						</div>
					</div>
				</div>
			</Row>
		</div>

		<Content style="height: 700px;" v-show="module === 'callService'">
			<Row style="height: 600px;width: 100%">
				<Col span="7" style="background-color: whitesmoke">
					<AILeft :data="customerInfo" :formdata="formdata" :customerData="customerData" :bizScenarioId="customerCallbizScenarioId" :customerLocaltion="customerLocaltion" :sessionId="sessionId" ref="aileft" @collectImage="collectImage" @collectCustomerInfo="showCollectCustomerInfoView" @getFormData="getFormData"></AILeft>
				</Col>
				<Col span="11" style="height: 500px;">
					<AgentOp
						ref="agentop"
						style="margin-top: 516px"
						@endSession="endSession"
						@screen="screenShare"
						:session-id="sessionId"
						@transfer="transferOtherAgent"
						@photoGuideBox="photoGuideBox"
						@screenMark="screenMark"
						@recordScreen="recordScreen"
						@stopScreenShare="stopScreenShare"
						@three="inviteOtherAgent"
						@stopRecordScreen="stopRecordScreen"
						@snapshot="snapshot"
						@sendPageLink="sendPageLink"
						@sendVideoLink="sendVideoLink"
						:agentName="agentId"
						:screenRecordId="screenRecordId"
						:customerData="customerData"
						:isScreenRecording="isScreenRecording"
						:customerClientInfo="customerClientInfo"
						:isScannerCode="isScannerCode"
						:isLocationing="isLocationing"
						:screen-publication-id="screenPublicationId"
						:clientId="clientId"
						:agentClientId="agentClientId"
						:customerName="customerName"
						:customerCallbizScenarioId="customerCallbizScenarioId"
						@handSign="handSign"
						@requestScreenShare="requestScreenShare"
						@faceRecognition="faceRecognition"
						@startScreenSync="startScreenSync"
						:screenSyncState="screenSyncState"
						@getlocation="getlocation"
						@sendScanner="sendScanner"
						@stopSendScanner="stopSendScanner"
					>
					</AgentOp>
					<!--</Row>-->
				</Col>
				<Col span="6">
					<right
						ref="right"
						:captureImage="captureImage"
						:recorddata="recorddata"
						:chatList="chatList"
						:formdata="formdata"
						:agentId="agentId"
						:agent-status="agentStatus"
						:sessionId="sessionId"
						:audioMuted="audioMuted"
						:appointValue="appointValue"
						@checkIn="checkIn"
						@checkOut="checkOut"
						@upgradeToVideo="upgradeToVideo"
						@loginAms="loginAms"
						@otherWork="otherWork"
						@appoint="appoint"
						@audioControl="audioControl"
						@logout="logoutAms"
						@ready="ready"
						@unready="unready"
						@addwater="setWatermark"
						@addbackgroup="setBackground"
						:isCalling="isCalling"
					></right>
				</Col>
			</Row>
		</Content>
		<ManagementCenter v-show="module === 'managerCenter'" :managentData="managentData" @handlePage="handlePage" @search="search" :initData="initData" :chiefs="chiefs" @joinSession="joinSession" @selectSession="selectSession"></ManagementCenter>
		<FormData v-show="module === 'formData'" ref="FormData" :customerCallbizScenarioId="customerCallbizScenarioId"></FormData>
		<!--<Footer style="background:rgba(229,229,229,1);color:rgba(164,164,164,1);font-size: 16px">© 2019HomeCredit版权所有</Footer>-->
		<!-- 同屏组件 -->
		<div :style="screenSyncScaleStyle" class="screensync-container">
			<VueDraggableResizable v-if="showScreenSyncView" :disable-user-select="true" :resizable="false" :w="screensyncRect.width" :h="screensyncRect.height" :x="screensyncRect.x" :y="screensyncRect.y" drag-handle=".screensync-title" :scale="screenSyncScale" :parent="true">
				<div class="screensync-title">
					<div>
						{{ $t('ivcs.startScreenSync') }}
					</div>
					<div class="screensync-stop" @click="stopScreenSync">
						<img class="screensync-stop-image" src="../../static/images/stopScreenSync.png" alt="" />
					</div>
				</div>
				<div class="screensync-wraper">
					<ScreenSync class="screensync" :isCustomer="false" :url="null" :onMessageOut="onScreenSyncMessage" :messageIn="messageIn"> </ScreenSync>
				</div>
			</VueDraggableResizable>
		</div>
		<RemoteLink :remotelinkurl="remotelinkurl" v-if="showRemotelink" @closeRemotelink="closeRemotelink" />
		<FormInfo v-if="showFormInfo" @cancel="cancelFormInfo" :showFormInfo="showFormInfo" :followId="followId" :formId="formId"></FormInfo>
		<!-- 富文本 -->
		<RichText v-if="richText" :richText="richText" @close="closeRichText" />
	</Layout>
</template>

<script>
import ivcs from '../ivcs-sdk';
import VueDraggableResizable from 'vue-draggable-resizable';
import AppearCamera from './Toast/ApperaCamera';
import ManagementCenter from './ManagementCenter';
import FormData from './Toast/FormData.vue';
import Right from './Right';
import imchat from '../tool/imchat';
import message from '../../static/js/message';
import AILeft from './AILeft';
import AgentOp from './AgentOp';
import Settings from './Settings';
import Userinfo from './Userinfo';
import Transfer from './Toast/Transfer';
import SendLink from './Toast/SendLink';
import SendVideo from './Toast/SendVideo';
import watermark from './Toast/WaterMark';
import bg from './Toast/BG';
import Appointment from './Toast/Appointment';
import Otherwork from './Toast/Otherwork';
import RemoteLink from './RemoteLink';
import { getuserforminfo, getsessionformdata, compareFace, uploadFileWithBlob, getHumanFlowDetailWithSessionId, judgeChief, findAgents, getAllBizScenario, getAgentBindBizScenario, dropRobotStream, updateFormRecord, sumbitLocation, getsessiondetail, getAgentsWithSession, setHumanFlowStatus } from '../api/api';
import WatermarkReplacebackground from './WatermarkReplacebackground';
import Screensharemark from './Screensharemark';
import Headop from './Headop';
import RemoteHandSign from './Toast/RemoteHandSign';
import { retrieveImageFromClipboardAsBase64 } from '../tool/util';
import _ from 'lodash';
import GroupList from './Toast/GroupList';
import CustomerScreen from './Toast/CustomerScreen';
import { dataURItoBlob, getSplitString, debounce, sendMessageToRecord, userInSessionRecord, formatSessionMessageRecords } from '../tool/util';
import ScreenSync from '@zco/screen-sync';
import '@zco/screen-sync/dist/screen-sync.css';
import FormInfo from '../components/Toast/FormInfo';
import RichText from '../components/Toast/RichText.vue';
import { mapMutations, mapState } from 'vuex';
export default {
	name: 'Agent',
	components: {
		CustomerScreen,
		RemoteHandSign,
		Transfer,
		Headop,
		Screensharemark,
		WatermarkReplacebackground,
		Settings,
		AgentOp,
		AILeft,
		Right,
		Userinfo,
		SendLink,
		SendVideo,
		watermark,
		ManagementCenter,
		AppearCamera,
		ScreenSync,
		VueDraggableResizable,
		RemoteLink,
		FormData,
		FormInfo,
		RichText
	},
	data() {
		return {
			message: null,
			customerVideoViewWidth: window.screen.width * 0.24,
			customerScreenSize: {
				width: 320,
				height: 480
			},
			isScreenRecording: false, //判断录屏状态
			isScannerCode: false, //判断扫码状态
			isLocationing: false, //判断获取地理位置状态
			showFormInfo: false, //表单弹窗状态
			followId: '', //表单流水号
			formId: 0, // 表单id
			customerScreenShareIng: false,
			showCustomerScreenView: false,
			isExit: false,
			showCollectionInfoView: false,
			showSettingView: false,
			showCustomerView: false,
			showScreenMarkView: false,
			onRing: false, //是否振铃了
			isReplaceBackground: false,
			isAddWatermark: false,
			agentStatus: {
				logged: false,
				ready: false,
				otherWork: false,
				checkIn: false
			},
			resolution: {
				width: 640,
				height: 480
			}, //分辨率
			maxBitrate: 512, //推送的码率
			aitype: '',
			Red: 100,
			Green: 100,
			Blue: 100,
			formdata: null, //客户在线表单信息
			customerInfo: null, //客户提前填好的信息
			participant: null,
			agentStreams: [],
			userId: null, //访客id
			username: null,
			roomId: null,
			roomToken: null, //坐席创建的房间的token,
			localstream: null, //坐席自己的流
			localstreamId: null, //坐席自己的流id
			localpublication: null,
			inviteAgentIsRobot: false, //是否为机器人

			screenPublicationId: null,

			screenstream: null, //坐席共享的流或者监听到其他坐席共享的流
			screenstreampublication: null, //坐席分享流的管理publication
			screenappstream: null, //坐席共享的app流
			recorddata: [], //会话过程中的数据
			chatList: this.$store.state.chatList || [],
			captureImage: null, //拍客户端的照片
			audioMuted: false, //坐席是否静音
			roomresp: null, //房间里面的内容
			recordstreamList: [], //在录制的流的recordid合集
			icsClient: null,
			ccsurl: null,
			sessionId: null,
			agentId: null,
			clientId: null,
			customerName: '', //访客name
			agentClientId: null,
			ticket: null,
			sessiondata: null, //当前会话的数据
			userData: null,
			otherworkreason: null, //小休原因
			appointValue: null, //预约的内容
			amsinterval: null,
			isHandSign: false,
			customerClientInfo: 'web', //默认来自web_h5
			recordStream: null,
			recordStreamPublication: null,
			groupsItems: [],

			streamAddEvent: null,
			streamEndEvent: null,
			customerQuitEvent: null,
			agentQuitEvent: null,
			agentJoinSessionEvent: null,
			customizedMediaStream: null,

			inSession: false,
			screenRecordId: null,
			screenRecordPublicationId: null,
			checkInGroups: null,
			systemErrorEvent: null,
			customerSubscribeId: null,
			ccsErrorEvent: null,
			humanWorkflowSteps: this.$store.state.humanWorkflowSteps,
			workflowId: '',
			isShowManagerCenter: false,
			isShowFormData: false, //表单列表tab
			module: 'callService',
			operatorName: sessionStorage.getItem('operatorName'),
			agentSeatId: sessionStorage.getItem('agentSeatId'),
			chiefs: [], //坐席属于班组长的技能组列表
			allGroupList: JSON.parse(sessionStorage.getItem('groupsList')),
			managentData: [], //通话管理中的会话数据
			searchGroupChief: [],
			initData: [],
			isChief: false,
			isCalling: false,
			checkInfo: {
				page: '',
				pageSize: '',
				agentId: '',
				agentStatus: '',
				groups: this.searchGroupChief
			},
			insertSessionClientId: '',
			token: '',
			showImposeMediaTypeView: false, //显示音频转视频
			isShowTransfer: false,
			callMediaType: 'video',
			receiveMediaType: 'video',
			searchAgentBindBizScenario: [], //转接和三方指定坐席绑定的业务场景
			otherAgentMembers: [],
			screenShareStatus: 'off',
			isKickPerson: false, //当前服务的分组是否是班组长
			customerCallbizScenarioId: 0, //当前通话，访客呼叫的业务场景id
			sessionGroupId: '', //当前通话，坐席服务的分组id，即访客派工到的具体分组id
			customerData: {},
			customerLocaltion: this.$store.state.customerLocation,
			managementCenterInterrupt: false,

			// 同屏参数
			screenSyncScale: 1.0,
			screenSyncScaleStyle: { transform: 'scale(1.0)' },
			showScreenSyncView: false, // 是否显示同屏窗口
			screensyncRect: {
				width: document.documentElement.clientWidth / 4,
				height: document.documentElement.clientHeight / 2,
				scrollHeight: 0,
				x: (document.documentElement.clientWidth * 3) / 8,
				y: 20
			}, // 同屏窗口的大小和位置
			messageIn: {},
			screenSyncState: 'disable',
			remotelinkurl: '',
			showRemotelink: false,
			coBrowsingId: 0,
			writingShow: false, //共享标注组件
			screenStreamLabel: '' //当前坐席屏幕共享流的标签
		};
	},
	computed: {
		...mapState({
			messageData: state => state.message.messageData,
			agent: state => state.user.agent,
			customer: state => state.user.customer,
			cmdData: state => state.message.cmdData,
			agentMembers: state => state.user.agentMembers,
			sessionMembers: state => state.user.sessionMembers,
			richText: state => state.message.richText
		}),
		/*获取振铃的提示信息*/
		getArrageCustomerTips() {
			let tips = this.$t('ivcs.arragecustomer');
			if (this.customerData.isScreenSyncMode) {
				tips = this.customerData.fullName + ' ' + this.$t('ivcs.arrageScreenSync');
			}
			return tips;
		},
		/*获取振铃时的地理位置信息 */
		getCustomerLocation() {
			return this.$store.state.customerLocation;
		},
		/**获取业务场景id */
		getBizScenarioId() {
			return this.$store.state.bizScenarioId ? true : false;
		}
	},

	watch: {
		/*监听customerLocaltion变化 */
		getCustomerLocation(val) {
			this.customerLocaltion = val;
		}
	},

	/*初始化*/
	mounted() {
		this.isTokenExit();
		if (this.$store.state.token) {
			this.bindMove(this);
		}
		this.systemErrorEventListener();

		window.addEventListener(
			'paste',
			function(e) {
				retrieveImageFromClipboardAsBase64(e, function(imageDataBase64) {
					// If there's an image, open it in the browser as a new window :)
					if (imageDataBase64) {
						console.log(imageDataBase64);
						// window.open(imageDataBase64);
					}
				});
			},
			false
		);

		/**
		 * 页面触发 onbeforeunload 事件时进入
		 * 1）在页面被关闭前会进入
		 * 2）方法有返回值时才会弹框
		 * 3）方法返回的值与页面最终是否被关闭无关，即返回什么值都不会影响
		 */
		window.onbeforeunload = event => {
			console.log('准备离开网页：' + new Date());
			setTimeout(beforeloadResult, 1000);
			if (!this.isExit) {
				event.returnValue = '';
			}
		};
		/**
		 * 只要能进入此方法，则表示用户并没有离开页面
		 */
		function beforeloadResult() {
			console.log('not leave：' + new Date());
		}
		window.addEventListener('unload', () => {
			this.pageClose();
		});
	},

	destroyed() {
		this.pageClose();
	},
	methods: {
		...mapMutations('user', ['SET_CUSTOMER_INFO', 'SET_AGENT_INFO', 'SET_MEMBERS_DATA', 'SET_SESSION_MEMBERS']),
		...mapMutations('message', ['SET_MESSAGE_DATA', 'SET_RICH_TEXT']),
		/**2021-11-17 新增防抖函数，间隔500毫秒向服务器请求数据 */
		changeAgentId: debounce(function(agentName) {
			if (agentName) {
				this.getAgentBindBizScenario(agentName);
			} else {
				this.$store.state.bizScenarioId = '';
				this.$refs.Transfer.bizScenarioId = '';
				this.getAllBizScenario();
			}
		}, 500),
		cancelFormInfo() {
			this.showFormInfo = false;
		},
		//强插带过来的访客信息
		selectSession(userData, formid) {
			this.customerData = userData;
			this.$store.state.formId = formid;
		},

		//关闭富文本视图
		closeRichText() {
			this.$store.commit('SET_RICH_TEXT', '');
		},

		/**
		 * 获取session详情，获取业务场景下的人工工作流,包含已完成的数据
		 * @param {String} sessionId 会话id
		 * @param {String} scenarioId 业务场景id
		 */
		getHumanFlowSteps(sessionId, scenarioId) {
			let parameter = {
				sessionId: sessionId,
				scenarioId: scenarioId
			};
			getHumanFlowDetailWithSessionId(parameter)
				.then(res => {
					if (res.status === 200 && res.data && res.data.scenarioDetail && res.data.scenarioDetail.workflowSteps) {
						this.$store.commit('setWorkflowId', res.data.scenarioDetail.workflowSteps.flow.id);
						this.$store.commit('setWorkflowName', res.data.scenarioDetail.workflowSteps.flow.name);
						console.log('scenarioDetail humanworkflowName', this.$store.state.workflowName);
						let humanWorkflowSteps = [];
						let completeHumanStep = [];
						completeHumanStep = res.data.completeHumanStep;
						if (completeHumanStep.length === 0) {
							humanWorkflowSteps = res.data.scenarioDetail.workflowSteps.steps.map(item => {
								return {
									content: getSplitString(item.content, this.customerData),
									humanflowId: item.humanflowId,
									id: item.id,
									isDot: item.isDot,
									status: ''
								};
							});
						} else {
							humanWorkflowSteps = res.data.scenarioDetail.workflowSteps.steps.map(item => {
								let tmp = '';
								completeHumanStep.forEach(human => {
									if (human.humanStepId === item.id) {
										tmp = this.$t('session.completed');
									}
								});
								return {
									content: getSplitString(item.content, this.customerData),
									humanflowId: item.humanflowId,
									id: item.id,
									isDot: item.isDot,
									status: tmp
								};
							});
							console.log(humanWorkflowSteps);
						}
						this.$store.commit('setWorkFlow', humanWorkflowSteps);
					}
				})
				.catch(error => {
					this.$Message.error({
						content: error.message,
						duration: 3
					});
				});
		},

		//获取该agentId所绑定的业务场景
		getAgentBindBizScenario(agentId) {
			getAgentBindBizScenario(agentId)
				.then(res => {
					if (res.data && res.data.scenarios) {
						this.searchAgentBindBizScenario = res.data.scenarios.map(item => {
							return {
								value: item.name,
								label: item.name,
								id: item.id
							};
						});
					}
					this.inviteAgentIsRobot = res.data.isRobot;
					//默认显示第一条数据
					this.$refs.Transfer.bizScenarioId = this.searchAgentBindBizScenario.length > 0 ? this.searchAgentBindBizScenario[0].id : '';
					this.$store.state.bizScenarioId = this.$refs.Transfer.bizScenarioId;
				})
				.catch(error => {
					console.log('get agents bind groups error', error);
					this.$Message.error(this.$t('ivcs.noBizScenario'));
				});
		},

		isTokenExit() {
			if (!this.$store.state.token) {
				this.$router.push('/');
			}
		},

		/**
		 * 发送信息记录
		 *
		 */
		sendMessageRecord(businessType, message, result, info, role) {
			let data = {};
			data.businessType = businessType ? businessType : '';
			data.message = message ? message : '';
			data.result = result ? result : { code: '', message: '' };
			data.info = info ? info : {};
			role ? role : 'all';
			data.user = {
				agentId: this.$store.state.agentInfo.id,
				name: this.$store.state.agentInfo.userName,
				isRobot: this.$store.state.agentInfo.isRobot,
				org: this.$store.state.agentInfo.org,
				role: this.$store.state.agentInfo.role
			};
			ivcs.agent.sendCustomMessage(
				data,
				role,
				success => {
					console.log('发送消息成功！' + data, success);
				},
				error => {
					console.log('发送消息失败！' + data, error);
				}
			);
		},

		/**
		 * 升级成视频
		 */
		upgradeToVideo() {
			if (this.callMediaType == 'video' && this.receiveMediaType == 'video') {
				console.log('is now video session');
				return;
			}
			this.showImposeMediaTypeView = true;
		},
		/**
		 * 确定升级成视频
		 */
		imposeMedia() {
			let self = this;
			console.log(this.$refs.outOfMirror.appearAgent);
			console.log(this.$refs.outOfMirror.appearCustomer);
			let agent_voice_to_video = this.$refs.outOfMirror.appearAgent;
			let client_voice_to_video = this.$refs.outOfMirror.appearCustomer;
			if (!agent_voice_to_video && !client_voice_to_video) {
				console.log('must select one voice to video true');
				return;
			}
			this.callMediaType = client_voice_to_video == 'true' ? 'video' : 'audio';
			this.receiveMediaType = agent_voice_to_video == 'true' ? 'video' : 'audio';
			let info = {};
			let result = {};
			info.client_voice_to_video = this.callMediaType;
			info.agent_voice_to_video = this.receiveMediaType;
			if (this.receiveMediaType == 'video') {
				ivcs.agent.voiceToVideo(
					resp => {
						result.code = 200;
						result.message = resp;
						console.log('voice to video success', resp);
						for (let i = 0; i < this.agentStreams.length; i++) {
							this.agentStreams[i].audioOnly = false;
						}
					},
					error => {
						result.code = 400;
						result.message = error.message || error.reason || error;
						console.log('voice to video error', error);
						self.sendMessageRecord('system_msg', 'voice to video error', error);
					}
				);
			}
			this.sendMessageRecord('upgrade_to_video', this.$t('ivcs.upgradeToVideo'), result, info);
			this.showImposeMediaTypeView = false;
		},

		/**
		 * 强拆其他坐席会话
		 * name=video标签
		 */
		removeAgent(data) {
			let clientId;
			let self = this;
			_.forEach(this.otherAgentMembers, function(agent) {
				console.log(agent.name === data.id);
				if (agent.name === data.id) {
					clientId = agent.clientId;
				} else if (agent.name === 'robot') {
					clientId = agent.clientId;
					self.dropAgentByClientId(data.id);
				}
			});
			ivcs.agent.dropClient(
				clientId,
				function(status, resp) {
					console.log('drop client result', status, resp);
					_.remove(self.otherAgentMembers, function(item) {
						return item.clientId === clientId;
					});
					/** 2021-11-30 强拆后移除 video流  */
					self.agentStreams = self.agentStreams.filter(stream => stream.id !== data.id);
				},
				function(reason) {
					console.log(reason);
					self.$Message.error(self.$t('session.dropError'));
				}
			);

			console.log('drop client Id', clientId);
		},

		/**
		 * 根据 clientId drop 会话
		 * @param { String } roomId 房间 ID
		 * @param { String } clientId 客户端 ID
		 * @param { String } type 类型  agent --->人工 robot --> 数字人
		 *
		 */
		async dropAgentByClientId(clientId) {
			try {
				await dropRobotStream(this.roomId, clientId);
			} catch (e) {
				console.error('drop robot stream error:', JSON.stringify(e));
			}
		},
		search(value) {
			let data = value;
			let groups = [];
			if (!data.groups.length) {
				_.forEach(this.chiefs, function(item) {
					groups.push(item.data);
				});
				data.groups = groups;
			}
			this.findAgents(data);
		},
		handlePage(info) {
			let data = info;
			let groups = [];
			_.forEach(this.chiefs, function(item) {
				groups.push(item.data);
			});
			data.groups = groups;
			this.findAgents(data);
		},
		switchModule(value) {
			this.module = value;
			this.$refs.FormData.form = {
				sessionId: '',
				formNumber: '',
				clientId: '',
				formName: '',
				formStatus: '',
				pushTime: '',
				getTime: ''
			};
			let groups = [];
			if (this.module == 'managerCenter') {
				_.forEach(this.chiefs, function(item) {
					groups.push(item.data);
				});
				this.checkInfo.groups = groups;
				this.findAgents(this.checkInfo);
			}
		},
		//表单数据页面
		switchFormData(value) {
			this.module = value;
			this.$refs.FormData.getFormDataList();
		},

		/**
		 * 查询同一机构下其他坐席的通话状态
		 */
		findAgents(info) {
			var self = this;
			let arr = [];
			findAgents(info)
				.then(resp => {
					let data = resp.data.data;
					self.initData = data;
					_.forEach(data, function(item) {
						let obj = {};
						obj.agentName = item.agentName;
						obj.userData = item.userData && item.userData[0].data ? item.userData[0].data : '';
						obj.belongGroups = [];
						obj.groups = []; //item.groups;
						obj.currentStatus = item.currentStatus;
						_.forEach(item.belongGroups, function(groupData) {
							obj.belongGroups.push(groupData.group.name);
							if (item.groups.indexOf(groupData.groupId) != -1) {
								obj.groups.push(groupData.group.name);
							}
						});
						let toScenarios = [];
						let toGroups = [];
						_.forEach(item.invites, function(invite) {
							toScenarios.push(invite.toScenarioId);
							toGroups.push(invite.toGroup);
						});
						obj.toScenarioId = Array.from(new Set(toScenarios));
						obj.toGroup = Array.from(new Set(toGroups));
						obj.session = item.session;
						arr.push(obj);
					});
					self.dealWithManagentData(arr);
				})
				.catch(error => {
					console.log('find agents status', error);
				});
		},

		/**
		 * 处理通话管理的数据
		 */
		dealWithManagentData(data) {
			let arr = data.map(item => {
				return {
					serviceNo: item.agentName,
					name: item.agentName,
					belongSkillGroup: item.belongGroups.toString(),
					checkInSkillGroup: item.groups.toString(),
					currentStatus: item.currentStatus,
					session: item.session,
					toScenarioId: item.toScenarioId,
					toGroup: item.toGroup,
					userData: item.userData ? item.userData : ''
				};
			});
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].currentStatus != 'serving') {
					arr[i]._disabled = true;
				}
			}
			console.log('agents session status origin data', arr);
			this.managentData = [];
			arr.forEach(item => {
				this.managentData.push(item);
			});
			console.log('agents session status data', this.managentData);
		},

		/**
		 * 判断当前技能组下，坐席是不是班组长
		 */
		isChiefInGroupId(serviceId) {
			console.log('ring service skill', serviceId, this.chiefs);
			let isChief = false;
			this.chiefs.forEach(function(item) {
				if (item.data == serviceId) {
					isChief = true;
				}
			});
			console.log('is chiefs', isChief);
			return isChief;
		},
		sessionCcsErrorEventListener() {
			this.ccsErrorEvent = ivcs.agent.addEventListener('ccsError', error => {
				console.log('ccs socket io error', error);
				ivcs.agent.removeEventListener('ccsError', this.ccsErrorEvent);
				let message;
				if (error.data && error.data.code === 103) {
					message = this.$t('ccs.sioDisconnect');
				} else if (error.data && (error.data.code === 105 || error.data.code === 105)) {
					message = this.$t('ccs.reconnectError');
				} else if (error.data && error.data.code === 104) {
					message = this.$t('ccs.drop');
					this.quitCurrentSession();
				}
				this.$Notice.info({
					title: this.$t('ivcs.confirm'),
					desc: message,
					duration: 10,
					top: 0
				});
			});
		},

		/**通话中网络异常，提示挂断
		 * @param(String) cpmfirmMessage 提示内容
		 */
		systemErrorTips(confirmMessage) {
			let self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.confirm'),
				content: confirmMessage,
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					self.inSession = false;
					self.quitCurrentSession();
				},
				onCancel() {
					self.inSession = false;
				}
			});
		},

		systemErrorEventListener() {
			ivcs.agent.onConnectStatus(status => {
				console.log('onConnectStatus ', status);
				switch (status) {
					case 'connect':
						this.$Message.info({
							content: this.$t('session.connected'),
							closable: true,
							duration: 10
						});
						break;
					case 'reconnecting':
						this.$Message.warning({
							content: this.$t('session.reconnecting'),
							closable: true,
							duration: 10
						});
						break;
					case 'reconnect_failed':
						this.$Message.error({
							content: this.$t('session.reconnectFailed'),
							closable: true,
							duration: 10
						});
						break;
				}
			});
			let self = this;
			this.systemErrorEvent = ivcs.agent.addEventListener('systemError', error => {
				console.log('system error', error, error.data.data, error.code);
				let errorMessage = error.data.data ? error.data.data : error.data;
				if (error.code === 1006) {
					this.gotoLoginPage(self.$t('login.error'));
				} else if (error.code === 1007) {
					this.systemErrorTips(self.$t('ivcs.messageLinkException'));
				} else if (error.code === 1005) {
					this.systemErrorTips(self.$t('ivcs.audioAbnormality'));
				} else if (this.inSession) {
					if (error.code !== 1004) {
						this.$Message.error(errorMessage);
					} else {
						//判断订阅的访客流是否结束了
						if (error.data == this.customerSubscribeId) {
							this.$Notice.info({
								title: this.$t('ivcs.confirm'),
								desc: this.$t('session.customerVideoEnd'),
								duration: 10,
								top: 0
							});
						}
					}
				}
			});
		},

		loginAms() {
			this.$Spin.show();
			this.isShowFormData = true;
			ivcs.agent.login(
				resp => {
					console.log('login success', resp);
					this.agentStatus.logged = true;
					this.agentId = resp.agentId;
					this.$Spin.hide();
					ivcs.agent.onDrop(resp => {
						console.log('on drop resp,', resp);
						if (resp.code === 403) {
							this.gotoLoginPage(this.$t('ivcs.loginReplace'));
						} else if (resp.code === 401) {
							this.gotoLoginPage(this.$t('login.drop'));
						} else if (resp.code === 402) {
							this.gotoLoginPage(this.$t('login.error'));
						} else if (resp.code === 404) {
							this.gotoLoginPage(this.$t('login.disconnect'));
						} else if (resp.code === 405) {
							this.gotoLoginPage(this.$t('login.reconnectFailed'));
						}
					});
					ivcs.agent.onRing(data => {
						this.ring();
						if (data && data.userData && data.userData.formId) {
							this.$store.state.formId = data.userData.formId;
							this.dealWithCustomerSendMessage();
						}
						this.sessionId = data.sessionId;
						this.onRing = true;
						this.roomId = data.room;
						this.customerData = data.userData;
						this.$store.state.clientName = data.userData.name;
						this.customerLocaltion = data.userData.customerLocaltion ? data.userData.customerLocaltion : this.customerLocaltion;
						this.callMediaType = data && data.userData && data.userData.callMediaType ? data.userData.callMediaType : 'video';
						this.receiveMediaType = data && data.userData && data.userData.receiveMediaType ? data.userData.receiveMediaType : 'video';
						this.customerCallbizScenarioId = Number(data.bizScenarioId);
						this.sessionGroupId = data.group;
						this.$store.commit('SET_CUSTOMER_INFO', data.userData.customer);
						if (this.isChiefInGroupId(this.sessionGroupId)) {
							this.isKickPerson = true;
						} else {
							this.isKickPerson = false;
						}
						this.$store.commit('setGroupId', this.sessionGroupId);
						// 是不是当前通话的班组长
						// let token = this.$store.state.token;
						if (this.customerCallbizScenarioId != '' && !data.userData.humanWorkflowSteps) {
							this.getHumanFlowSteps(this.sessionId, this.customerCallbizScenarioId);
						}
						this.userId = data.userData.userId;
					});
					ivcs.agent.onCancelRing(reason => {
						this.stopRing();
						this.onRing = false;
						this.sessionId = null;
						this.$store.commit('setWorkFlow', []);
						console.log('stop ring,', reason);
					});
				},
				error => {
					console.log(error);
					this.$Spin.hide();
					if (error.code === '3008') {
						this.$Message.warning({
							content: this.$t('ams.timeout'),
							closable: true,
							duration: 10
						});
						return;
					} else if (error.code === '3009') {
						this.$Message.warning({
							content: this.$t('ams.reconnecting'),
							closable: true,
							duration: 10
						});
						return;
					}
					this.$store.commit('setWorkFlow', []);
					this.apiError(error);
					console.log('login error', error);
				}
			);
		},

		checkIn() {
			if (!this.agentStatus.logged) {
				this.$Message.error(this.$t('ivcs.amslogin'));
				return;
			}
			let groupsList = JSON.parse(sessionStorage.getItem('groupsList'));
			console.log('checkIn list', groupsList); //所有的技能组
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.chooseGroups'),
				render: h => {
					return h(GroupList, {
						ref: 'GroupList',
						props: {
							groupsList: groupsList
						}
					});
				},
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				async onOk() {
					let groups = this.$refs.GroupList.groups;
					self.checkInGroups = {
						groups: groups
					};
					if (self.checkInGroups.groups.length == 0) {
						self.$Message.error(self.$t('ivcs.chooseGroups'));
						return;
					}
					console.log('checkIn para', self.checkInGroups);

					let results = [];
					_.forEach(self.checkInGroups.groups, (value, key) => {
						results.push(self.judgeChief(self.agentSeatId, value));
						console.log('value,key', value, key);
					});
					let finalResult = await Promise.all(results);
					self.chiefs = finalResult.filter(function(item) {
						return item.code == 1;
					});
					if (self.chiefs.length > 0 && !self.agentStatus.ready) {
						self.isChief = true;
						self.isShowManagerCenter = true;
					} else {
						self.isChief = false;
						self.isShowManagerCenter = false;
					}
					console.log('self.chiefs:', self.chiefs);
					this.$Spin.show();
					ivcs.agent.checkIn(
						self.checkInGroups,
						resp => {
							console.log('checkin success', resp);
							this.$Spin.hide();
							groupsList.forEach(item => {
								if (groups.indexOf(item.id) !== -1) {
									self.agentStatus.checkIn = true;
									self.groupsItems.push(item);
								}
							});
							self.$store.commit('setCustomerSkill', self.groupsItems);
						},
						error => {
							console.log('checkin error', error);
							this.$Spin.hide();
							if (error.code === '3008') {
								this.$Message.warning({
									content: this.$t('ams.timeout'),
									closable: true,
									duration: 10
								});
								return;
							} else if (error.code === '3009') {
								this.$Message.warning({
									content: this.$t('ams.reconnecting'),
									closable: true,
									duration: 10
								});
								return;
							}
							/**2021-01-10 JiangXin 坐席签入失败，班组长管理中心Tab不显示 */
							self.isShowManagerCenter = false;
							self.apiError(error);
						}
					);
				},
				onCancel() {}
			});
		},
		judgeChief(userId, groupId) {
			return new Promise((resolve, reject) => {
				judgeChief(userId, groupId)
					.then(resp => {
						if (resp.data == 'true') {
							resolve({ code: 1, data: groupId });
						} else {
							resolve({ code: 2, data: groupId });
						}
					})
					.catch(error => {
						reject({ code: 3, data: error });
						console.log(error);
					});
			});
		},
		checkOut() {
			this.$Spin.show();
			ivcs.agent.checkOut(
				this.checkInGroups,
				resp => {
					this.$Spin.hide();
					this.agentStatus.checkIn = false;
					this.groupsItems = [];
					this.isShowManagerCenter = false;
					console.log('checkout resp', resp);
				},
				error => {
					console.log(error);
					this.$Spin.hide();
					if (error.code === '3008') {
						this.$Message.warning({
							content: this.$t('ams.timeout'),
							closable: true,
							duration: 10
						});
						return;
					} else if (error.code === '3009') {
						this.$Message.warning({
							content: this.$t('ams.reconnecting'),
							closable: true,
							duration: 10
						});
						return;
					}
					this.$Message.error(error.message);
				}
			);
		},

		logoutAms() {
			var self = this;
			this.$Modal.confirm({
				title: this.$t('ivcs.confirm'),
				content: this.$t('ivcs.logOutAmsConfirm'),
				width: 600,
				closable: false,
				okText: this.$t('ivcs.Yes'),
				cancelText: this.$t('ivcs.No'),
				async onOk() {
					self.$Spin.show();
					try {
						let logOut = await self.logOut();
						console.log('logOut result', logOut);
						self.$Spin.hide();
						self.agentStatus.logged = false;
					} catch (error) {
						self.$Spin.hide();
						self.apiError(error);
					}
					self.$router.push('/');
				}
			});
		},

		ready() {
			if (!this.agentStatus.logged) {
				this.$Message.error(this.$t('ivcs.amslogin'));
				return;
			}
			this.isShowFormData = false; //表单tab
			this.$Spin.show();
			this.isShowManagerCenter = false;
			ivcs.agent.ready(
				resp => {
					this.$Spin.hide();
					this.agentStatus.ready = true;
					this.agentStatus.otherWork = false;
					this.appointValue = null;
					console.log('ready result', resp);
				},
				error => {
					console.log(error);
					this.$Spin.hide();
					if (error.code === '3008') {
						this.$Message.warning({
							content: this.$t('ams.timeout'),
							closable: true,
							duration: 10
						});
						return;
					} else if (error.code === '3009') {
						this.$Message.warning({
							content: this.$t('ams.reconnecting'),
							closable: true,
							duration: 10
						});
						return;
					}
					this.$Spin.hide();
					this.apiError(error);
				}
			);
		},

		unready() {
			this.$Spin.show();
			this.isShowFormData = true; //表单tab
			if (this.isChief) {
				this.isShowManagerCenter = true;
			}
			ivcs.agent.unReady(
				(status, resp) => {
					console.log(status, resp);
					this.$Spin.hide();
					this.agentStatus.ready = false;
				},
				error => {
					console.log(error);
					this.$Spin.hide();
					if (error.code === '3008') {
						this.$Message.warning({
							content: this.$t('ams.timeout'),
							closable: true,
							duration: 10
						});
						return;
					} else if (error.code === '3009') {
						this.$Message.warning({
							content: this.$t('ams.reconnecting'),
							closable: true,
							duration: 10
						});
						return;
					}
					this.apiError(error);
				}
			);
		},
		//坐席预约
		appoint() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.chooseAppointment'),
				render: h => {
					return h(Appointment, {
						ref: 'Appointment'
					});
				},
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					let appointState;
					let appointValue = this.$refs.Appointment.appointValue;
					if (appointValue === self.$t('ivcs.rest')) {
						appointState = 'otherWork';
					} else if (appointValue === self.$t('ivcs.finishing')) {
						appointState = 'afterWork';
					} else if (appointValue === self.$t('ivcs.other')) {
						appointState = 'notReady';
					}
					let data = {
						appointState: appointState,
						reason: this.$refs.Appointment.restReason
					};
					self.$Spin.show();
					ivcs.agent.appoint(
						data,
						resp => {
							console.log('appoint success', resp);
							self.$Spin.hide();
							self.appointValue = appointValue;
							self.agentStatus.ready = false;
						},
						error => {
							console.log(error);
							self.$Spin.hide();
							if (error.code === '3008') {
								self.$Message.warning({
									content: this.$t('ams.timeout'),
									closable: true,
									duration: 10
								});
								return;
							} else if (error.code === '3009') {
								self.$Message.warning({
									content: this.$t('ams.reconnecting'),
									closable: true,
									duration: 10
								});
								return;
							}
							self.$Message.error(error.message);
						}
					);
					console.log(`agent appoint,value,${this.$refs.Appointment.appointValue},reason,${this.$refs.Appointment.restreason}`);
					console.log('appoint data', data);
				},
				onCancel() {}
			});
		},

		otherWork() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.chooserest'),
				render: h => {
					return h(Otherwork, {
						ref: 'Otherwork'
					});
				},
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					let data = {
						reason: this.$refs.Otherwork.reason
					};
					self.$Spin.show();
					ivcs.agent.otherWork(
						data,
						resp => {
							console.log('other work success', resp);
							self.$Spin.hide();
							self.isShowFormData = true;
							self.agentStatus.otherWork = true;
							self.agentStatus.ready = false;
						},
						error => {
							console.log(error);
							self.$Spin.hide();
							if (error.code === '3008') {
								self.$Message.warning({
									content: this.$t('ams.timeout'),
									closable: true,
									duration: 10
								});
								return;
							} else if (error.code === '3009') {
								self.$Message.warning({
									content: this.$t('ams.reconnecting'),
									closable: true,
									duration: 10
								});
								return;
							}
							self.$Message.error(error.message);
						}
					);
					console.log('other reason', this.$refs.Otherwork.reason);
				},
				onCancel() {}
			});
		},

		ring() {
			let audio = document.getElementById('ringaudio');
			audio.play();
		},

		stopRing() {
			let audio = document.getElementById('ringaudio');
			audio.pause();
		},

		/**
		 * 静默观战，加入某一通正在通话中的会话
		 * @param {object} value 会话详情
		 */
		joinSession(value) {
			this.roomId = value.roomId;
			this.module = 'callService';
			let self = this;
			let videoLabel = 'agent' + this.operatorName;
			let accessToken = this.$store.state.token;
			let ccsUrl = loginUrl;
			let sessionId = value.sessionId;
			this.sessionId = value.sessionId;
			console.log('joinSession', value);
			ivcs.agent.joinSession(
				videoLabel,
				undefined,
				accessToken,
				ccsUrl,
				sessionId,
				function(resp) {
					self.dealWithCustomerSendMessage();
					self.isShowManagerCenter = false;
					self.isKickPerson = true;
					self.$store.commit('SET_AGENT_INFO', { ...self.agent, clientId: resp.sessionData.clientId });
					self.$store.commit('SET_SESSION_MEMBERS', [...self.sessionMembers, ...resp.sessionData.members]);
					//TODO 强插
					self.sessionGroupId = value.toGroup;
					self.customerCallbizScenarioId = value.toScenarioId;
					self.managementCenterInterrupt = true;
					console.log('join session success', resp.sessionData.members);
					self.localPublicationId = resp.publicationId; //当前坐席推流的id,可用于订阅机器人
					_.forEach(resp.sessionData.members, function(item) {
						if (item.role != 'customer' && item.user.name !== self.operatorName) {
							if (item.user && item.user.profile && item.user.profile.isRobot) {
								self.otherAgentMembers.push({
									clientId: item.id,
									name: 'robot'
								});
							} else {
								self.otherAgentMembers.push({
									clientId: item.id,
									name: 'agent' + item.user.name
								});
							}
						} else {
							if (item.role === 'customer') {
								self.$store.commit('SET_CUSTOMER_INFO', { ...self.customer, clientId: item.id });
							}
						}
					});
					if (self.isChief) {
						self.isCalling = true;
					}
					self.streamAdd();
					self.streamEnd();
					self.onCustomerQuit();
					self.onAgentQuit();
					self.onJoinSession();
					self.onTextMessage();
					self.onCustomerScreenSize();
					self.onResourceMessage();
					self.dealWithCustomerSendMessageBeforeVideoConnect(resp.customerSendMessage);
					self.getSessionData();
					self.dealWithCustomerClientInfo(resp.customerClientType);
					self.onCcsDrop();
					self.getHumanFlowSteps(sessionId, self.customerCallbizScenarioId);
					self.sessionCcsErrorEventListener();
					self.businessInit();
				},
				function(error) {
					console.log('join session error', error);
					if (error && error.data && error.data.message) {
						self.$Message.error(error.data.message);
						self.isShowManagerCenter = true;
					}
				}
			);
		},
		async answerCall() {
			let agentLabel = 'agent' + this.agentId;
			if (this.isAddWatermark || this.isReplaceBackground) {
				this.aitype = agentLabel;
				this.customizedMediaStream = await this.$refs.wmrbg.createCustomizedStream();
			}
			this.sessionCcsErrorEventListener();
			var self = this;
			ivcs.agent.answer(
				agentLabel,
				this.receiveMediaType,
				this.customizedMediaStream,
				info => {
					this.onTextMessage();
					console.log('answer result,', info);
					this.agentClientId = info.sessionData.clientId || '';
					this.localPublicationId = info.publicationId; //当前坐席推流的id,可用于订阅机器人
					this.$store.commit('SET_AGENT_INFO', { ...this.agent, clientId: info.sessionData.clientId });
					console.log(info.sessionData.members, 'SET_SESSION_MEMBERS');
					this.$store.commit('SET_SESSION_MEMBERS', [...this.sessionMembers, ...info.sessionData.members]);
					_.forEach(info.sessionData.members, function(item) {
						if (item.role === 'customer') {
							self.customerName = item.user.name;
							self.clientId = item.id;
							let user = self.getCustomerInfo(item);
							self.$store.commit('SET_CUSTOMER_INFO', user);
						}
						if (item.role != 'customer' && item.user.name !== self.operatorName) {
							if (item.user && item.user.profile && item.user.profile.isRobot) {
								self.otherAgentMembers.push({
									clientId: item.id,
									name: 'robot'
								});
							} else {
								self.otherAgentMembers.push({
									clientId: item.id,
									name: 'agent' + item.user.name
								});
							}
						}
					});
					if (this.isChief) {
						this.isCalling = true;
					}
					if (this.customerData.isScreenSyncMode) {
						this.screenSyncState = 'idle';
					}
					this.streamAdd();
					this.streamEnd();
					this.onCustomerQuit();
					this.onAgentQuit();
					this.onJoinSession();
					this.onTransferReason();
					this.onCustomerScreenSize();
					this.onResourceMessage();
					this.dealWithCustomerClientInfo(info.customerClientType);
					this.dealWithCustomerSendMessageBeforeVideoConnect(info.customerSendMessage);
					this.getSessionData();
					this.onCcsDrop();
					this.businessInit();
				},
				error => {
					console.log('answer call error', error);
					switch (error.code) {
						case '60022':
							error.message = this.$t('ivcs.notallowederror');
							break;
						case '60023':
							error.message = this.$t('ivcs.notfounderror');
							break;
						case '60024':
							error.message = this.$t('ivcs.notfounderror');
							break;
						case '60025':
							error.message = this.$t('ivcs.overconstrainederror');
							break;
						case '1017':
							error.message = this.$t('ivcs.customerleaveSession');
							break;
						default:
							break;
					}
					this.$Notice.warning({
						title: this.$t('ivcs.confirm'),
						desc: error.message,
						duration: 10
					});
					this.quitCurrentSession();
				}
			);
			this.onRing = false;
			this.stopRing();
		},
		getCustomerInfo(info) {
			let userInfo = {};
			if (info.user && info.user.profile) {
				userInfo = {
					id: info.user.id,
					org: info.user.org,
					gender: info.user.profile.gender,
					fullName: info.user.profile.fullName,
					avatar: info.user.profile.picture,
					userName: info.user.name,
					role: info.role,
					customerLevel: info.user.customerLevel,
					clientId: info.id
				};
			}
			return userInfo;
		},

		onCcsDrop() {
			ivcs.agent.onSessionDrop(resp => {
				console.log('on session drop', resp);
				this.$Notice.info({
					title: this.$t('ivcs.confirm'),
					desc: this.$t('ccs.drop'),
					duration: 10
				});
				this.quitCurrentSession();
			});
		},

		rejectCall() {
			ivcs.agent.reject(
				function(resp) {
					console.log('reject success', resp);
				},
				function(error) {
					console.log('reject error', error);
					this.apiError(error);
				}
			);
			this.onRing = false;
			this.stopRing();
			this.sessionId = null;
		},

		/**
		 * 转接给其他坐席
		 */
		transferOtherAgent() {
			this.isShowTransfer = true;
			this.$refs.Transfer.agentId = '';
			this.$refs.Transfer.bizScenarioId = '';
			this.inviteOtherStatus = 'transfer';
			this.getAllBizScenario();
		},

		/**
		 * 三方邀请其他坐席
		 */
		inviteOtherAgent() {
			this.isShowTransfer = true;
			this.$refs.Transfer.agentId = '';
			this.$refs.Transfer.bizScenarioId = '';
			this.inviteOtherStatus = 'threeway';
			this.getAllBizScenario();
		},

		startInviteOtherAgent() {
			this.isShowTransfer = false;
			var agentId = this.$refs.Transfer.agentId;
			var bizScenarioId = this.$refs.Transfer.bizScenarioId;
			let transferReason = {
				reason: this.$t('ivcs.transferSpecifiedAgentReason')
			};
			if (this.searchAgentBindBizScenario.length === 0 && this.inviteAgentIsRobot) {
				this.$Message.error(this.$t('ivcs.noBizScenarioWithRobotAgent'));
				return;
			} else if (this.searchAgentBindBizScenario.length === 0 && !this.inviteAgentIsRobot) {
				this.$Message.error(this.$t('ivcs.noBizScenarioWithAgent'));
				return;
			}
			if (this.$refs.Transfer.serviceId === '' && agentId && this.inviteAgentIsRobot === true) {
				console.log(this.inviteAgentIsRobot);
				this.$Message.error(this.$t('ivcs.noBizScenarioWithRobotAgent'));
				this.isShowTransfer = true;
				return;
			}
			if (this.$refs.Transfer.serviceId === '' && agentId && !this.inviteAgentIsRobot) {
				this.$Message.error(this.$t('ivcs.noBizScenarioWithAgent'));
				this.isShowTransfer = true;
				return;
			}
			if (!agentId && !bizScenarioId) {
				this.$Message.error(this.$t('ivcs.chooseTransferTips'));
				return;
			}
			// 不指定特定坐席的转接
			if (agentId == null) {
				agentId = '*';
				transferReason.reason = this.$t('ivcs.transferNotSpecifiedAgentReason');
			}
			if (bizScenarioId == null || bizScenarioId === '') {
				bizScenarioId = this.customerCallbizScenarioId;
				transferReason.reason = this.$t('ivcs.transferSkillGroupReason');
			}
			if (bizScenarioId === '' && agentId === '*') {
				this.$Message.warning(this.$t('session.selectAgentIdOrGroups'));
				return;
			}
			let bizscenario = this.searchAgentBindBizScenario.find(item => item.id === bizScenarioId);
			let option = {
				agentId: agentId,
				service: bizScenarioId,
				bizSceneName: bizscenario.label,
				userData: {
					service: bizScenarioId,
					formId: this.$store.state.formId,
					userId: this.userId,
					callMediaType: this.callMediaType,
					receiveMediaType: this.receiveMediaType,
					fullName: this.customerData.fullName,
					gender: this.customerData.gender,
					name: this.$store.state.clientName,
					customer: this.customer,
					customerLocaltion: this.customerLocaltion
				},
				filter: []
			};
			console.log('invite agent options', option);
			if (this.inviteOtherStatus == 'threeway') {
				/** 配置三方邀请坐席的时候，设置invite的类型 */
				option.type = 'invite-multiple';
				this.inviteOtherInit(option);
			} else {
				//fix record agent quit session
				// option.userData.messageData.push(message);
				/** 配置转接邀请坐席的时候，设置invite的类型 */
				option.type = 'transfer-bizscenario';
				this.transferAgentInit(option, transferReason);
			}
		},

		/**
		 * 转接坐席初始化
		 */
		transferAgentInit(option, transferReason) {
			console.log(option);
			let self = this;
			ivcs.agent.transfer(
				option,
				false,
				transferReason,
				function(resp) {
					console.log('transfer success', resp);
					self.$Message.success(self.$t('session.success'));
					self.quitCurrentSession('transfer');
				},
				function(error) {
					console.log('transfer agent error', error, error.code);
					self.sendMessageRecord('system_msg', '普通坐席转接错误', error);
					switch (error.code) {
						case '404':
							self.$Message.error(self.$t('ivcs.transferNoAgent'));
							break;
						case '406':
							self.$Message.error(self.$t('ivcs.transferOffDay'));
							break;
						case '407':
							self.$Message.error(self.$t('ivcs.transferOffTime'));
							break;
						case '401':
							self.$Message.error(self.$t('ivcs.transferTimeout'));
							break;
						case '408':
							self.$Message.error(self.$t('ivcs.businessNotAvailable'));
							break;
						case '402':
							switch (error.waitingCode) {
								case '1001':
									self.$Message.error(self.$t('ivcs.transferNoAgent'));
									break;
								case '1002':
									self.$Message.error(self.$t('ivcs.transfertNotAgentLogin'));
									break;
								case '1003':
									self.$Message.error(self.$t('ivcs.transferNotAgentChecked'));
									break;
								case '1004':
									self.$Message.error(self.$t('ivcs.transferSessionsDisconnected'));
									break;
								default:
									self.$Message.error(self.$t('ivcs.transferFindAgent'));
									break;
							}
							break;
						default:
							self.$Message.error(self.$t('ivcs.transferTimeout'));
							break;
					}
				}
			);
		},

		/**
		 * 班组长转接初始化
		 *
		 */
		chiefTransferAgentInit(option, transferReason) {
			console.log(option);
			let self = this;
			ivcs.agent.chiefTransfer(
				option,
				undefined,
				transferReason,
				function(resp) {
					console.log('transfer success', resp);
					self.$Message.success(self.$t('session.success'));
					self.quitCurrentSession('transfer');
				},
				function(error) {
					console.log(error.code);
					switch (error.code) {
						case '404':
							self.$Message.error(self.$t('ivcs.transferNoAgent'));
							break;
						case '406':
							self.$Message.error(self.$t('ivcs.transferOffDay'));
							break;
						case '407':
							self.$Message.error(self.$t('ivcs.transferOffTime'));
							break;
						case '402':
							switch (error.waitingCode) {
								case '1001':
									self.$Message.error(self.$t('ivcs.transferNoAgent'));
									break;
								case '1002':
									self.$Message.error(self.$t('ivcs.transfertNotAgentLogin'));
									break;
								case '1003':
									self.$Message.error(self.$t('ivcs.transferNotAgentChecked'));
									break;
								case '1004':
									self.$Message.error(self.$t('ivcs.transferSessionsDisconnected'));
									break;
								default:
									self.$Message.error(self.$t('ivcs.transferFindAgent'));
									break;
							}
							break;
						default:
							self.$Message.error(self.$t('ivcs.transferTimeout'));
							break;
					}
				}
			);
		},

		/**
		 * 三方初始化
		 */
		inviteOtherInit(option) {
			let self = this;
			ivcs.agent.inviteOther(
				option,
				function(resp) {
					console.log('transfer success', resp);
					if (resp.waitingCode && resp.waitingCode !== '-1') {
						self.sendMessageRecord('system_msg', '三方错误', resp);
						self.$Message.error(resp.message);
					} else {
						self.$Message.success(self.$t('session.success'));
					}
				},
				function(error) {
					self.sendMessageRecord('system_msg', '三方错误', error);
					switch (error.code) {
						case '404':
							self.$Message.error(self.$t('ivcs.transferNoAgent'));
							break;
						case '406':
							self.$Message.error(self.$t('ivcs.threeWaysOffDay'));
							break;
						case '407':
							self.$Message.error(self.$t('ivcs.threeWaysOffTime'));
							break;
						case '402':
							switch (error.waitingCode) {
								case '1001':
									self.$Message.error(self.$t('ivcs.transferNoAgent'));
									break;
								case '1002':
									self.$Message.error(self.$t('ivcs.transferNotAgentLogin'));
									break;
								case '1003':
									self.$Message.error(self.$t('ivcs.transferNotAgentChecked'));
									break;
								case '1004':
									self.$Message.error(self.$t('ivcs.transferSessionsDisconnected'));
									break;
								default:
									self.$Message.error(self.$t('ivcs.transferFindAgent'));
									break;
							}
							break;
						default:
							self.$Message.error(self.$t('ivcs.threeWaysTimeout'));
							break;
					}
				}
			);
		},

		/**
		 * 获取当前机构下的所有分组
		 */
		getAllBizScenario() {
			var self = this;
			getAllBizScenario()
				.then(function(resp) {
					if (resp.data && resp.data.scenList) {
						self.searchAgentBindBizScenario = [];
						_.forEach(resp.data.scenList, function(item) {
							self.searchAgentBindBizScenario.push({
								value: item.name,
								label: item.name,
								id: item.id
							});
						});
					}
					console.log('getAllBizScenario result', resp, self.searchAgentBindBizScenario);
				})
				.catch(function(error) {
					var response = error.response;
					console.log('getAllBizScenario error', response);
				});
		},

		recordScreen() {
			let self = this;
			ivcs.agent.startRecordScreen(
				resp => {
					this.screenRecordId = resp.recordId;
					this.screenRecordPublicationId = resp.publicationId;
					self.sendMessageRecord('start_record_screen', self.$t('chat.start_record_screen'));
					this.isScreenRecording = true;
					console.log('startRecordScreen success', resp);
				},
				error => {
					if (error.code != '6003' && error.code != '60022') {
						this.$Message.error(error.message);
						self.sendMessageRecord('system_msg', '坐席录制屏幕错误', error);
					}
					console.log('startRecordScreen error', error);
				},
				stop => {
					//保存停止录制屏幕业务操作
					let cmdId = this.cmdData.get('screen-record');
					ivcs.agent.saveCancelRecordScreen(cmdId, this.customer.clientId);
					this.screenRecordId = null;
					this.screenRecordPublicationId = null;
					console.log('record screen stop', stop);
					this.isScreenRecording = false;
					let msg = sendMessageToRecord('peer-cancel', { cmd: 'screen-record', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				}
			);
			//保存录制屏幕业务操作
			ivcs.agent.saveRecordScreen('saveRecordScreen', self.customer.clientId).then(res => {
				console.log(res, 'saveRecordScreen');
				self.cmdData.set('screen-record', res.cmdId);
				let msg = sendMessageToRecord('peer-cmd', { cmd: 'screen-record', data: {} }, this.agent);
				this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
			});
		},

		/**
		 * 关闭 iframelink 渲染
		 */
		closeRemotelink() {
			this.showRemotelink = false;
			this.remotelinkurl = '';
		},

		stopRecordScreen() {
			ivcs.agent.stopRecordScreen(
				this.screenRecordPublicationId,
				this.screenRecordId,
				resp => {
					this.screenRecordId = null;
					this.screenRecordPublicationId = null;
					this.$Message.success(this.$t('ivcs.haveStopRecord'));
					console.log('stop record screen success', resp);
					this.sendMessageRecord('stop_record_screen', this.$t('chat.stop_record_screen'));
					this.isScreenRecording = false;
				},
				error => {
					console.log('stop record screen error', error);
					this.sendMessageRecord('system_msg', 'stop record screen success', error);
					this.$Message.error(error.message);
				}
			);
			//保存停止录制屏幕业务操作
			let cmdId = this.cmdData.get('screen-record');
			ivcs.agent.saveCancelRecordScreen(cmdId, this.customer.clientId);
			let msg = sendMessageToRecord('peer-cancel', { cmd: 'screen-record', data: {} }, this.agent);
			this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
		},

		audioControl() {
			if (this.audioMuted) {
				ivcs.agent.unmute(
					'audio',
					() => {
						console.log('unmute audio succss');
						this.audioMuted = !this.audioMuted;
					},
					function(error) {
						console.log('mute audio failed', error);
						this.sendMessageRecord('system_msg', 'mute audio failed', error);
						this.$Message.error(error);
					}
				);
			} else {
				ivcs.agent.mute(
					'audio',
					() => {
						console.log('mute audio succss');
						this.audioMuted = !this.audioMuted;
					},
					function(error) {
						console.log('mute audio failed', error);
						this.sendMessageRecord('system_msg', 'mute audio failed', error);
						this.$Message.error(error);
					}
				);
			}
		},

		screenShare() {
			let self = this;
			if (this.screenShareStatus === 'on') {
				this.$Message.info(this.$t('ivcs.isSharing'));
				return;
			}
			this.screenStreamLabel = this.agent.userName + 'screen';
			ivcs.agent.screenShare(
				resp => {
					console.log('screenShare success', resp);
					this.screenPublicationId = resp;
					self.sendMessageRecord('startScreen', self.$t('chat.startScreen'));
				},
				error => {
					if (error.code != '6003' && error.code != '60022') {
						this.$Message.error(error.message);
						this.sendMessageRecord('system_msg', 'screenShare error', error);
					}
				},
				onend => {
					console.log('screen share end', onend);
					//保存停止屏幕共享业务操作
					let cmdId = self.cmdData.get('screen-share');
					self.cmdData.delete('screen-share');
					ivcs.agent.saveCancelScreenShare(cmdId, self.customer.clientId);
					let msg = sendMessageToRecord('peer-cancel', { cmd: 'screen-share', data: {} }, this.agent);
					self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
				},
				this.screenStreamLabel
			);
			//保存屏幕共享业务操作
			ivcs.agent.saveScreenShare('saveScreenShare', self.customer.clientId).then(res => {
				console.log('saveScreenShare', res);
				let msg = sendMessageToRecord('peer-cmd', { cmd: 'screen-share', data: {} }, this.agent);
				self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
				self.cmdData.set('screen-share', res.cmdId);
			});
		},

		stopScreenShare() {
			let self = this;
			ivcs.agent.stopScreenShare(
				this.screenPublicationId,
				resp => {
					console.log('stop screenshare success', resp);
					this.screenPublicationId = null;
					// if (this.customerClientInfo === 'mini'){
					self.sendMessageRecord('stopScreen', self.$t('chat.stopScreen'));
					// }
				},
				error => {
					console.log('stop screenshare error', error);
					this.$Message.error(error);
					self.sendMessageRecord('system_msg', 'stop screenshare error', error);
				}
			);
			//保存停止屏幕共享业务操作
			let cmdId = self.cmdData.get('screen-share');
			self.cmdData.delete('screen-share');
			ivcs.agent.saveCancelScreenShare(cmdId, self.customer.clientId);
			let msg = sendMessageToRecord('peer-cancel', { cmd: 'screen-share', data: {} }, this.agent);
			self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
		},

		exitSystem() {
			if (this.sessionId) {
				this.$Message.error(this.$t('ivcs.sessionOperror'));
			} else {
				// this.logOut();
				this.isExit = true;
				this.gotoLoginPage(this.$t('ivcs.exit'));
			}
		},
		/*api调用错误*/
		apiError(error) {
			this.isExit = true;
			this.$Message.error(error.message);
			this.gotoLoginPage(this.$t('ivcs.loginAgain'));
		},

		/**
		 * 人脸识别
		 * */
		faceRecognition() {
			this.$Notice.success({
				title: this.$t('ivcs.confirm'),
				desc: this.$t('session.faceCompareIng'),
				duration: 5
			});
			this.sendMessageRecord('start_face_compare', this.$t('chat.start_face_compare'));
			let result = {};
			var canvas = document.getElementById('customerCanvas');
			var context = canvas.getContext('2d');
			var video = document.getElementById('customer');
			context.drawImage(video, 0, 0, this.customerVideoViewWidth, 350);
			var imageDataUrl = canvas.toDataURL('image/png');
			console.log('base64', imageDataUrl);
			try {
				let fileName = Date.now() + '.png';
				let blob = dataURItoBlob(imageDataUrl);
				uploadFileWithBlob(blob, fileName)
					.then(resp => {
						console.log('upload file', resp);
						result.url = resp.data.data.url;
						this.compareFace(this.userId, resp.data.data.url);
					})
					.catch(error => {
						console.log(error);
						result.message = error.message || error.name || error;
						result.code = 400;
						this.$Message.error(this.$t('session.faceCompareFailed'));
						this.sendMessageRecord('face_compare_fail', this.$t('chat.face_compare_fail'), result);
						this.sendMessageRecord('system_msg', 'face compare fail', error);
					});
			} catch (e) {
				console.log(e);
				this.$Message.error(this.$t('session.faceCompareFailed'));
				result.message = e.message || e.name || e;
				this.sendMessageRecord('face_compare_fail', this.$t('chat.face_compare_fail'), result);
				this.sendMessageRecord('system_msg', 'face compare fail', e);
			}
		},

		/**留痕人脸识别结果
		 * @param(String)result:识别结果
		 */
		saveFaceCompareResult(result) {
			ivcs.agent.faceRecognition(
				result,
				this.customer.clientId,
				res => {
					console.log(res);
				},
				error => {
					console.log(error);
				}
			);
		},

		/**
		 * 人脸检测接口
		 * */
		compareFace(userId, imageUrl) {
			let para = {
				imageUrl: imageUrl
			};
			let result = {};
			result.url = para.imageUrl;
			let data = {
				imageUrl: imageUrl,
				result: ''
			};
			compareFace(userId, para)
				.then(resp => {
					if (resp.data == 1) {
						this.$Message.success(this.$t('session.isHimself'));
						result.code = 200;
						result.message = this.$t('session.isHimself');
						data.result = 'yes';
						this.saveFaceCompareResult(data);
					} else if (resp.data == 0) {
						result.code = 400;
						result.message = this.$t('session.isNotI');
						this.$Message.error(this.$t('session.isNotI'));
						data.result = 'no';
						this.saveFaceCompareResult(data);
					} else if (resp.data == -1) {
						this.$Message.warning(this.$t('session.noFace'));
						result.code = 400;
						result.message = this.$t('session.noFace');
						data.result = 'noface';
						this.saveFaceCompareResult(data);
					}
				})
				.catch(error => {
					console.log(error);
					if (error && error.data && error.code && error.code === 1101 && error.data.errCode === 404) {
						this.$Message.error(this.$t('session.faceError'));
					} else {
						this.$Message.error(this.$t('session.faceCompareFailed'));
					}
					data.result = 'apiError';
					this.saveFaceCompareResult(data);
				});
		},

		endSession() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.confirm'),
				content: self.$t('ivcs.endsession'),
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					self.sendMessageRecord('system_msg', 'agent end session');
					self.inSession = false;
					self.quitCurrentSession();
				},
				onCancel() {}
			});
		},

		/**正常结束会话 和 转接后结束会话
		 * @param (String) type transfer-坐席转接 normal-正常挂断
		 */
		async quitCurrentSession(type = 'normal') {
			let result = await this.$refs.wmrbg.stopCustomizedLocalStream();
			console.log('stopCustomizedLocalStream:', result);
			this.removeSessionListenerEvent();
			if (type !== 'transfer') {
				var self = this;
				console.log(this.isChief, '退出当前会话');
				await this.hangUp()
					.then(() => {
						self.otherAgentMembers = [];
					})
					.catch(error => {
						console.log(error);
					});
			}
			await this.setHumanworkflowTask();

			this.initializationData();
		},

		/**挂断会话后，根据当前会话中是否存在非相同业务场景下的坐席，如果不存在则设置当前会话的业务场景已完成 */
		async setHumanworkflowTask() {
			if (this.customerCallbizScenarioId !== this.$refs.Transfer.bizScenarioId) {
				await getAgentsWithSession(this.sessionId)
					.then(res => {
						if (res.status === 200) {
							let isExistSameBizScenarioId = false;
							res.data.forEach(item => {
								if (item.bizScenarioId === this.customerCallbizScenarioId) {
									return (isExistSameBizScenarioId = true);
								}
							});
							if (!isExistSameBizScenarioId) {
								setHumanFlowStatus(this.sessionId, this.customerCallbizScenarioId, 'complete')
									.then(res => {
										console.log(res);
									})
									.catch(err => {
										this.$Message.error(this.$t('ivcs.saveWorkFlowError'));
										console.log(err);
									});
							}
						}
					})
					.catch(err => {
						this.$Message.error(this.$t('ivcs.getWorkFlowWithAgentError'));
						console.log(err);
					});
			}
		},

		async hangUp() {
			var self = this;
			self.$store.state.chatList = []; //清空聊天记录
			this.removeSessionListenerEvent();
			return new Promise((resolve, reject) => {
				//TODO 挂断原因的UI设计后,添加这个内容
				let hangUpReason = {};
				console.log('非管理中心强插，挂断会话');
				ivcs.agent.hangup(
					hangUpReason,
					resp => {
						console.log('hangUp success', resp);
						resolve();
					},
					error => {
						console.log('hangUp error', error);
						self.sendMessageRecord('system_msg', 'agent hangup error', error);
						reject(error);
					}
				);
			});
		},

		async logOut() {
			return new Promise((resolve, reject) => {
				ivcs.agent.logout(
					resp => {
						console.log('logout success', resp);
						resolve(resp);
					},
					error => {
						console.log('logout error', error);
						reject(error);
					}
				);
			});
		},

		async getSessionData() {
			this.inSession = true;
			try {
				let { data } = await getsessiondetail(this.sessionId);
				console.log('getsessiondetail,data',data);
				let recordListData = data && data.data && data.data.recordList && data.data.recordList.data ? data.data.recordList.data : null;
				if(recordListData){
					console.log('getsessiondetail,recordListData',recordListData);
					recordListData.forEach(item => {
					if (item.msgType === 'text') {
						item.data = textFace2imgFace(item.data);
					}
				});
				let message = formatSessionMessageRecords(recordListData, this.sessionMembers);
				this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, ...message]);
				}
			} catch (e) {
				console.log('聊天记录获取失败:', e);
				this.$Message.error('聊天记录获取失败！');
			}
		},

		/**
		 * @param {string} customerClientType 状态 "Android"表示安卓
		 * 处理访客的来源信息
		 */
		dealWithCustomerClientInfo(customerClientType) {
			this.customerClientInfo = customerClientType;
		},

		dealWithCustomerSendMessageBeforeVideoConnect(messageArr) {
			for (let i = 0; i < messageArr.length; i++) {
				let messageInfo = messageArr[i];
				this.dealWithCustomerSendMessage(messageInfo);
			}
		},

		/**
		 * 收到转人工/转接的原因
		 */
		onTransferReason() {
			ivcs.agent.onTransferReasonMessage(data => {
				console.log('onTransferReason data', data);
			});
		},

		onTextMessage() {
			ivcs.agent.onTextMessage(data => {
				console.log('receive message', data);
				let message = data.data;
				if (message === 'collectionPicfailed') {
					this.$Message.error(this.$t('session.failed'));
				} else if (message.indexOf('startMark') != -1) {
					console.log('is screen mark data');
				} else {
					imchat.$emit('onTextMessage', data);
				}
			});
			ivcs.agent.onCustomMessage(data => {
				let self = this;
				console.log('onCustomMessage', data);
				if (data && data.data && data.data.receiveMediaType == 'video') {
					this.callMediaType = data.data.callMediaType;
					this.receiveMediaType = 'video';
					ivcs.agent.voiceToVideo(
						resp => {
							console.log('voice to video success', resp);
						},
						error => {
							self.sendMessageRecord('system_msg', 'agent voice to video error', error);
							console.log('voice to video error', error);
						}
					);
				} else if (data && data.data && data.data.businessType === 'workflow' && this.customerCallbizScenarioId === data.data.result.bizScenarioId) {
					this.$store.commit('setWorkFlow', data.data.info);
				} else if (data && data.data && data.data.businessType == 'send_form') {
					this.$store.state.formId = data.data.result.formId;
					this.dealWithCustomerSendMessage();
				} else if (data && data.data && (data.data.type == 'screensync' || data.data.type == 'whiteboard')) {
					// 同屏消息
					if (data.data.action == 'size') {
						this.screensyncRect.width = data.data.value.width;
						this.screensyncRect.height = data.data.value.height + 75;
						this.screensyncRect.scrollHeight = data.data.value.scrollHeight;
						this.screensyncRect.x = (document.documentElement.clientWidth - this.screensyncRect.width) / 2;
						this.screenSyncScale = Math.min((document.documentElement.clientHeight * 0.9) / this.screensyncRect.height, 1);
						this.screenSyncScaleStyle = {
							transform: `scale(${this.screenSyncScale})`
						};
						if (this.screenSyncState === 'disable') {
							this.screenSyncState = 'idle';
						}
					} else if (data.data.action === 'endScreenSync') {
						//解决坐席不点击同屏辅助按钮时 onCoBrowsing监听不到结束同屏
						this.voiceToVideoNoticeCustomer();
					}
				}
			});
		},

		/**更新表单提交记录
		 * @param {String} state 表单需要更新状态 success:表单提交成功 fail:表单提交失败
		 * @param {String} type 表单提交状态 ok:访客提交表单成功 其他状态一律为失败
		 */
		updateFormRecord(state, type) {
			let data = {
				id: this.$store.state.submitFormId,
				status: state
			};
			updateFormRecord(data)
				.then(res => {
					console.log(res);
					//访客提交表单成功则弹出访客提交的表单信息
					if (type === 'ok') {
						let id = this.$store.state.submitFormId;
						this.$refs.FormData.getFormDetail(id);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},

		onCustomerScreenSize() {
			ivcs.agent.onDeviceScreenSize(resp => {
				if (resp && resp.data) {
					let size = JSON.parse(resp.data);
					this.customerScreenSize.width = size.w / 3;
					this.customerScreenSize.height = size.h / 3;
					console.log('device screen size', resp, size);
				}
			});
		},

		onResourceMessage() {
			ivcs.agent.onResourceMessage(function(data) {
				console.log('receive resource message,,', data);
				imchat.$emit('onShareResource', data);
			});
		},

		removeSessionListenerEvent() {
			ivcs.agent.removeEventListener('onStreamAdd', this.streamAddEvent);
			ivcs.agent.removeEventListener('onStreamEnd', this.streamEndEvent);
			ivcs.agent.removeEventListener('ccsError', this.ccsErrorEvent);
			ivcs.agent.removeEventListener('onCustomerQuitSession', this.customerQuitEvent);
			ivcs.agent.removeEventListener('onAgentQuitSession', this.agentQuitEvent);
			ivcs.agent.removeEventListener('onAgentJoinSession', this.agentJoinSessionEvent);
			ivcs.agent.removeEventListener('systemError', this.systemErrorEvent);
			this.streamAddEvent = null;
			this.streamEndEvent = null;
			this.ccsErrorEvent = null;
			this.customerQuitEvent = null;
			this.agentJoinSessionEvent = null;
			this.systemErrorEvent = null;
		},

		streamAdd() {
			let self = this;
			if (this.streamAddEvent) return;
			this.streamAddEvent = ivcs.agent.addEventListener('onStreamAdd', streamInfo => {
				console.log('add steam attributes', streamInfo);
				var streamLabel = streamInfo.data.streamLabel;
				let audioOnly = streamInfo.data.audioOnly || false;
				var videoId = streamLabel;
				/** 判断进入的screen流是否是发起的坐席 */
				if (streamLabel.indexOf('screen') !== -1 && streamLabel !== this.screenStreamLabel) {
					return;
				}
				if (streamLabel !== 'customer' && streamLabel !== 'recordScreen' && streamLabel !== 'mobileScreen' && streamLabel !== '') {
					// 人工坐席
					// fix 如果开始是语音模式，等升级成视频后，三方其他坐席，导致其他坐席端收到的前面的坐席的流还是audioonly的。
					if (this.receiveMediaType == 'video' && streamLabel.indexOf('agent') > -1) {
						audioOnly = false;
					}
					this.agentStreams.push({
						id: streamLabel,
						label: streamLabel,
						audioOnly: audioOnly
					});
					$('#' + streamLabel).show();
				} else if (streamLabel === 'customer') {
					this.showCustomerView = true;
					videoId = 'customer';
				} else if (streamLabel === '') {
					console.log('is system stream,for example robot stream');
					//stream origin is admin,robot stream
					let streamLabel = 'robot';
					videoId = 'robot';
					this.agentStreams.push({
						id: streamLabel,
						label: streamLabel,
						audioOnly: audioOnly
					});
					$('#' + streamLabel).show();
				} else if (streamLabel === 'recordScreen') {
					//录屏流
					return;
				} else if (streamLabel === 'mobileScreen') {
					//安卓屏幕流
					this.customerScreenShareIng = true;
					this.showCustomerScreenView = true;
				}
				this.agentStreams.forEach(item => {
					if (item.label === 'screen') {
						this.screenShareStatus = 'on';
					}
				});
				this.$nextTick(() => {
					ivcs.agent.renderStream(
						streamLabel,
						videoId,
						resp => {
							console.log('render success', resp, videoId, streamLabel);
							if (streamLabel == 'customer') {
								this.customerSubscribeId = resp;
								if (this.callMediaType === 'audio') {
									// set video stream to audio
									const srcObject = document.getElementById(videoId).srcObject;
									document.getElementById('customer_voice').srcObject = srcObject;
								}
							}
						},
						error => {
							self.sendMessageRecord('system_msg', 'voice render error', error);
							console.log('render error', error);
						},
						onPlayError => {
							console.log('onPlayError error', onPlayError);
						},
						onEnded => {
							console.log('onEnded error', onEnded);
							/**判断坐席是否正在进行屏幕共享 修复三方时一个坐席退出屏幕共享会结束的问题 */
							if (self.cmdData.get('screen-share') && onEnded === 'agent' + this.agent.userName) {
								self.stopScreenShare();
							}
						}
					);
				});
			});
		},

		streamEnd() {
			this.streamEndEvent = ivcs.agent.addEventListener('onStreamEnd', streamInfo => {
				var streamLabel = streamInfo.data.streamLabel;
				if (streamLabel === 'customer') {
					this.showCustomerView = false;
				} else if (streamLabel === '') {
					console.log('system stream is end,for example robot stream');
				} else if (streamLabel.indexOf('screen') !== -1) {
					if (streamLabel === this.screenStreamLabel) {
						this.screenShareStatus = 'off';
						this.screenPublicationId = null;
					}

					if (this.customerClientInfo === 'mini') {
						this.sendMessageRecord('stopScreen', this.$t('chat.stopScreen'));
					}
					let video = document.getElementById(streamLabel);
					if (video) {
						video.srcObject = null;
					}
					$('#' + streamLabel).remove();
					this.agentStreams = this.agentStreams.filter(item => item.label !== streamLabel);
				} else if (streamLabel === 'mobileScreen') {
					this.customerScreenShareIng = false;
					this.showCustomerScreenView = false;
				} else if (streamLabel.indexOf('agent') !== -1) {
					this.agentStreams = this.agentStreams.filter(item => item.label !== streamLabel);
				} else {
					$('#' + streamLabel).remove();
				}
				_.forEach(this.agentStreams, item => {
					if (item.id == streamLabel) {
						let div = document.getElementById(item.id + 'kick');
						if (div) {
							div.className = 'disappear';
						}
						let back = document.getElementById(item.id + 'back');
						if (back) {
							back.className = 'disappear';
						}
					}
				});
			});
		},

		onCustomerQuit() {
			this.customerQuitEvent = ivcs.agent.addEventListener('onCustomerQuitSession', info => {
				console.log('customer quit session', info);
				this.quitCurrentSession();
				this.$Notice.info({
					title: this.$t('ivcs.confirm'),
					desc: this.$t('ivcs.customerleave'),
					duration: 30,
					top: 0
				});
			});
		},

		onAgentQuit() {
			this.agentQuitEvent = ivcs.agent.addEventListener('onAgentQuitSession', info => {
				console.log('agentQuitSession', info);
				this.$Notice.info({
					title: this.$t('ivcs.confirm'),
					desc: this.$t('ivcs.otheragentleave'),
					duration: 30,
					top: 0
				});
				this.otherAgentMembers = this.otherAgentMembers.filter(stream => stream.id !== info.data.id);
				if (info.data && info.data.user && info.data.user.profile && info.data.user.profile.isRobot) {
					let label = 'robot';
					_.remove(this.agentStreams, item => {
						return item.id === label;
					});
					this.$nextTick(() => {
						console.log('on agent quit session agentStreams', this.agentStreams);
						this.agentStreams.sort();
					});
				}
				let message = userInSessionRecord(info.data);
				this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, message]);
				this.$store.commit(
					'SET_SESSION_MEMBERS',
					this.sessionMembers.filter(item => item.id !== info.data.id)
				);
			});
		},

		onJoinSession() {
			this.agentJoinSessionEvent = ivcs.agent.addEventListener('onAgentJoinSession', info => {
				console.log('onAgentJoinSession', info);
				if (info.data && info.data.user && info.data.user.profile && info.data.user.profile.isRobot) {
					this.otherAgentMembers.push({
						clientId: info.data.id,
						name: 'robot'
					});
				} else {
					this.otherAgentMembers.push({
						clientId: info.data.id,
						name: 'agent' + info.data.user.name
					});
				}
				let message = userInSessionRecord(info.data);
				this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, message]);
				this.$store.commit('SET_SESSION_MEMBERS', [...this.sessionMembers, info.data]);
				this.$store.commit('SET_MEMBERS_DATA', [...this.agentMembers, info.data]);
			});
		},
		/*去登录页面*/
		gotoLoginPage(confirmMessage) {
			var self = this;
			if (self.sessionId) {
				self.hangUp();
			}
			self.initializationData();
			this.$Modal.confirm({
				title: self.$t('ivcs.confirm'),
				content: confirmMessage,
				width: 600,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					self.logOut()
						.then(res => {
							self.$router.push('/');
							console.log('log out success', res);
						})
						.catch(err => {
							self.$router.push('/');
							console.log('log out error', err);
						});
				},
				onCancel() {}
			});
		},
		/*选择水印图*/
		setWatermark() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.choosewater'),
				render: h => {
					return h(watermark, {
						ref: 'watermark'
					});
				},
				width: 800,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					if (this.$refs.watermark.type == 1) {
						localStorage.setItem('watermarkimage', 'static/image/water640' + this.$refs.watermark.index + '.png');
					} else if (this.$refs.watermark.type == 2) {
						localStorage.setItem('watermarkimage', 'static/image/water1280' + this.$refs.watermark.index + '.png');
					} else if (this.$refs.watermark.type == 3) {
						localStorage.setItem('watermarkimage', 'static/image/water1920' + this.$refs.watermark.index + '.png');
					}
					self.isAddWatermark = true;
					self.$Message.success(self.$t('ivcs.watersuccess'));
				},
				onCancel() {}
			});
		},
		/*选择背景图*/
		setBackground() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.choosebackground'),
				render: h => {
					return h(bg, {
						ref: 'bg'
					});
				},
				width: 800,
				closable: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					if (this.$refs.bg.type == 1) {
						localStorage.setItem('bgimage', 'static/image/bg640' + this.$refs.bg.index + '.png');
					} else if (this.$refs.bg.type == 2) {
						localStorage.setItem('bgimage', 'static/image/bg1280' + this.$refs.bg.index + '.png');
					} else if (this.$refs.bg.type == 3) {
						localStorage.setItem('bgimage', 'static/image/bg1920' + this.$refs.bg.index + '.png');
					}
					self.isReplaceBackground = true;
					self.Red = this.$refs.bg.red;
					self.Green = this.$refs.bg.green;
					self.Blue = this.$refs.bg.blue;
					console.log(self.Red + ':' + self.Green + ':' + self.Blue);
					self.$Message.success(self.$t('ivcs.backgroundsuccess'));
				},
				onCancel() {}
			});
		},
		/*获取客户表单信息*/
		getFormData() {
			if (this.sessionId) {
				var self = this;
				getsessionformdata(self.sessionId).then(function(resp) {
					console.log('form data =', resp);
					if (resp.status === 200) {
						if (resp.data.code === 200) {
							if (resp.data && resp.data.data.length != 0) {
								var resultData = resp.data.data;
								self.formdata = resultData;
								self.$refs.aileft.showFormView = true;
								var allFormData = [];
								_.forEach(resultData, function(item) {
									_.forEach(item.fields, function(part) {
										allFormData.push(part);
									});
								});
								self.$refs.aileft.formField = allFormData;
							} else {
								self.$Message.error(self.$t('ivcs.noformdata'));
							}
						} else {
							self.$Message.error(self.$t('ivcs.noformdata'));
						}
					} else {
						self.$Message.error(self.$t('ivcs.noformdata'));
					}
				});
			} else {
				this.$Message.error(this.$t('ivcs.nosession'));
			}
		},
		/*收集用户信息*/
		showCollectCustomerInfoView() {
			if (this.sessionId) {
				this.showCollectionInfoView = true;
			} else {
				this.$Message.error(this.$t('ivcs.nosession'));
			}
		},

		collectCustomerInfo() {
			var name = this.$refs.Userinfo.name.trim();
			var id = this.$refs.Userinfo.id.trim();
			var mobile = this.$refs.Userinfo.mobile.trim();
			var category = this.$refs.Userinfo.category.trim();
			var address = this.$refs.Userinfo.address.trim();
			var company = this.$refs.Userinfo.company.trim();
			if (!name) {
				this.$Message.error(this.$t('ivcs.pleasePerfectUsername'));
				return;
			} else if (name.length > 16) {
				this.$Message.error(this.$t('ivcs.usernameLengthGreater'));
				return;
			}
			if (!id) {
				this.$Message.error(this.$t('ivcs.pleasePerfectIDcard'));
				return;
			} else if (!/^[\d]{17}[0-9|x|X]{1}$/.test(id)) {
				this.$Message.error(this.$t('ivcs.perfectIdCardFormat'));
				return;
			}
			if (!mobile) {
				this.$Message.error(this.$t('ivcs.pleasePerfectPhoneNumber'));
				return;
			} else if (!/^1[3|4|5|7|8][0-9]{9}$/.test(mobile)) {
				this.$Message.error(this.$t('ivcs.writePhoneNumberFormat'));
				return;
			}
			if (!category) {
				this.$Message.error(this.$t('ivcs.pleaseSelectBusinessType'));
				return;
			}
			if (!address) {
				this.$Message.error(this.$t('ivcs.pleasePerfectAddress'));
				return;
			}
			if (!company) {
				this.$Message.error(this.$t('ivcs.pleasePerfectCompanyName'));
				return;
			}

			//把客户信息发送给访客确认
			var info = {
				name: name,
				ID: id,
				mobile: mobile,
				productCategory: category,
				address: address,
				company: company,
				collect: 1,
				formId: this.$store.state.formId //收集信息
			};
			this.sendMessageRecord('collect-information', '收集信息', info); //告知访客收集信息
			this.showCollectionInfoView = false;
		},
		/*收集用户证件照片信息*/
		collectImage(type) {
			this.$Notice.info({
				title: this.$t('ivcs.confirm'),
				desc: this.$t('session.screenSnot'),
				duration: 5
			});
			let info = {};
			info = type;
			this.sendMessageRecord('agent_collect_image', this.$t('chat.agent_collect_image'), undefined, info);
		},
		/*初始化业务数据*/
		initializationData() {
			//结束会话前，如果访客正在填写表单，则将表单状态更新为失败
			if (this.$refs.agentop && this.$refs.agentop.nowSendFormStatus === this.$refs.agentop.sendFormStatus.end) {
				this.updateFormRecord('fail', 'reject');
			}
			this.isScreenRecording = false;
			this.isLocationing = false;
			this.formdata = null;
			this.customerInfo = null;
			this.userId = null;
			this.username = null;
			this.recorddata = [];
			this.chatList = [];
			this.captureImage = [];
			this.sessionId = null;
			this.clientId = null;
			this.agentStreams = [];
			this.showCustomerView = false;
			this.audioMuted = false;
			this.showCustomerScreenView = false;
			this.customerScreenShareIng = false;
			this.screenPublicationId = null;
			this.customizedMediaStream = null;
			this.customerSubscribeId = null;
			this.customerLocaltion = '';
			this.$store.state.customerLocation = '';
			this.$store.state.customerSubmitInfo = '';
			this.$store.state.formId = '';
			this.isScannerCode = false;
			this.isKickPerson = false;
			this.$refs.FormData ? (this.$refs.FormData.showFormInfo = false) : undefined;
			if (this.$refs.agentop && this.$refs.agentop.sendFormStatus) {
				this.$refs.agentop.nowSendFormStatus = this.$refs.agentop.sendFormStatus.start;
			}
			if (this.isChief && this.managementCenterInterrupt) {
				this.isCalling = false;
				this.isShowManagerCenter = true;
			}
			try {
				console.log(this.$refs.Userinfo, this.$refs.aileft);
				this.$refs.Userinfo ? this.$refs.Userinfo.clearData() : undefined;
				this.$refs.aileft ? (this.$refs.aileft.showAllImages = true) : undefined;
				// console.log(this.$refs.right.$refs.im);
			} catch (e) {
				console.log(e);
			}
			this.screenSyncState = 'disable';
			this.showScreenSyncView = false;
			this.$store.commit('SET_MESSAGE_DATA', []);
			this.$store.commit('setWorkflowId', '');
			this.$store.commit('setWorkFlow', []);
		},
		/*坐席端截图*/
		snapshot() {
			ivcs.agent.screenshot(
				undefined,
				this.customer.clientId,
				resp => {
					this.$Notice.info({
						title: this.$t('ivcs.confirm'),
						desc: this.$t('session.screenSnapshot'),
						duration: 5
					});
					console.log('request Screen snapshot', resp);
					let msg = sendMessageToRecord('get-screenshot', { cmd: 'get-screenshot', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				},
				error => {
					console.log(error);
					this.$Message.error(error);
				}
			);
		},
		requestScreenShare() {
			if (this.customerClientInfo !== 'android') {
				this.$Message.info(this.$t('client.notSupport'));
				return;
			}
			if (this.customerScreenShareIng) {
				this.showCustomerScreenView = true;
				return;
			}
			ivcs.agent.remoteControl(
				undefined,
				this.customer.clientId,
				resp => {
					console.log(resp);
					this.$Message.success(this.$t('ivcs.inviteOtherScreenShareSuccess'));
					this.sendMessageRecord('system_record', this.$t('ivcs.inviteOtherScreenShareSuccess'));
				},
				error => {
					this.$Message.error(error);
					this.sendMessageRecord('system_msg', 'agent request screenShare error', error);
				}
			);
		},
		// 发起同屏辅助
		startScreenSync() {
			if (this.showScreenSyncView) {
				this.stopScreenSync();
			} else {
				this.onCoBrowsing();
				// this.sendMessageRecord('start_screen_sync', this.$t('chat.start_screen_sync'));
				ivcs.agent.coBrowsing(
					{
						type: 'request-customer-size'
					},
					this.customer.clientId,
					res => {
						console.log('request-customer-size coBrowsing success', res);
					},
					error => {
						console.log('request-customer-size coBrowsing error', error);
					}
				);
				this.coBrowsingId = ivcs.agent.coBrowsing(
					undefined,
					this.customer.clientId,
					res => {
						this.showScreenSyncView = true;
						this.screenSyncState = 'started';
						console.log('coBrowsing success', res);
					},
					error => {
						console.log('coBrowsing error', error);
					}
				);
			}
		},
		// 停止同屏辅助
		stopScreenSync() {
			if (this.showScreenSyncView) {
				return new Promise((resolve, reject) => {
					ivcs.agent.cancelCoBrowsing(
						this.coBrowsingId,
						this.customer.clientId,
						res => {
							console.log('cancel coBrowsing success', res);
							this.showScreenSyncView = false;
							this.screenSyncState = 'idle';
							resolve();
						},
						error => {
							console.log('cancel coBrowsing error', error);
							reject(error);
						}
					);
				});
			}
		},

		//音频转视频并且通知访客 用于同屏结束
		voiceToVideoNoticeCustomer() {
			this.callMediaType = 'video';
			this.receiveMediaType = 'video';
			let info = {};
			info.client_voice_to_video = this.callMediaType;
			info.agent_voice_to_video = this.receiveMediaType;
			this.sendMessageRecord('upgrade_to_video', this.$t('ivcs.upgradeToVideo'), {}, info);
			if (this.receiveMediaType == 'video') {
				ivcs.agent.voiceToVideo(
					resp => {
						console.log('voice to video success', resp);
						for (let i = 0; i < this.agentStreams.length; i++) {
							this.agentStreams[i].audioOnly = false;
						}
					},
					error => {
						this.sendMessageRecord('system_msg', 'voice to video send error', error);
						console.log('voice to video error', error);
					}
				);
			}
		},

		/**
		 * 接收访客同屏数据过程/结果<目前用于坐席端同屏辅助>
		 */
		onCoBrowsing() {
			ivcs.agent.onCoBrowsing(resp => {
				// 同屏消息
				if (resp && resp.data && resp.data.data) {
					if (resp.data.data.action === 'endScreenSync') {
						// 停止同屏
						this.stopScreenSync().then(() => {
							// 禁用同屏按钮
							this.screenSyncState = 'disable';
						});
						this.voiceToVideoNoticeCustomer();
					} else {
						this.messageIn = resp.data.data;
					}
				}
			});
		},
		/**
		 * 接收同屏组件消息，并发送给访客
		 */
		onScreenSyncMessage(data) {
			ivcs.agent.browsingMark(
				data,
				this.customer.clientId,
				() => {
					// eslint-disable-line no-unused-vars
					// console.log('发送消息成功！' + message.syncId, success);
				},
				error => {
					console.error('发送消息失败！' + data, error);
				}
			);
		},

		releaseScreen() {
			ivcs.agent.releaseScreen(
				undefined,
				resp => {
					this.showCustomerScreenView = false;
					this.customerScreenShareIng = false;
					this.sendMessageRecord('stopScreen', this.$t('chat.stopScreen'));
					console.log('release screen', resp);
				},
				error => {
					this.$Message.error(error);
					let result = {};
					result.code = 400;
					result.message = error.message || error.reason || error;
					this.sendMessageRecord('system_record', this.$t('chat.stopScreenFail'), result);
					this.sendMessageRecord('system_msg', 'agent start screenAsync error', error);
				}
			);
		},

		screenPoint(point) {
			ivcs.agent.markScreen(
				undefined,
				point.x * 3,
				point.y * 3,
				resp => {
					console.log(resp);
					this.$Message.success(this.$t('session.success'));
				},
				error => {
					this.$Message.error(error);
				}
			);
			console.log(point);
		},

		/*发送指令邀请客户拍照*/
		photoGuideBox() {
			if (this.customerClientInfo === 'mini') {
				this.$Message.info(this.$t('mini.notSupport'));
				return;
			}
			ivcs.agent.sendGuideBox(
				undefined,
				this.customer.clientId,
				res => {
					console.log(res, 'photoGuideBox succss');
					this.$Message.success(this.$t('session.success'));
					let msg = sendMessageToRecord('show-guide-box', { cmd: 'show-guide-box', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				},
				error => {
					console.log('photoGuideBox failed', error);
					this.$Message.error(error);
				}
			);
		},
		sendVideoLink() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.sendvideo'),
				render: h => {
					return h(SendVideo, {
						ref: 'SendVideo'
					});
				},
				width: 888,
				closable: false,
				content: '',
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					let url = this.$refs.SendVideo.linkurl;
					if (!url) {
						self.$Message.info(self.$t('ivcs.pleaseSelectSendVideo'));
						return;
					}
					let info = {};
					info.url = url;
					info.name = url;
					info.type = 'video';
					ivcs.agent.sendViewResource(
						info,
						self.customer.clientId,
						res => {
							console.log('shareResourceWithUrl', res);
							self.$Message.success(self.$t('session.success'));
							let msg = sendMessageToRecord('view', { cmd: 'view', data: info }, self.agent);
							self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
						},
						error => {
							console.log(error);
							self.$Message.error(error);
						}
					);
					console.log(this.$refs.SendVideo.linkurl);
				},
				onCancel() {}
			});
		},
		/*推送链接*/
		sendPageLink() {
			var self = this;
			this.$Modal.confirm({
				title: self.$t('ivcs.sendlink'), //'选择发送的链接',
				render: h => {
					return h(SendLink, {
						ref: 'SendLink'
					});
				},
				width: 777,
				closable: false,
				content: false,
				okText: self.$t('ivcs.Yes'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					let url = this.$refs.SendLink.linkurl;
					if (this.customerClientInfo === 'mini' && url.indexOf('ivcs-demo.zealcomm.cn') === -1) {
						self.$Message.info(self.$t('mini.linkError'));
						return;
					}
					if (!url) {
						self.$Message.info(self.$t('ivcs.pleaseSelectSendUrl'));
						return;
					}
					let info = {};
					info.url = url;
					info.name = url;
					info.type = 'page';
					ivcs.agent.sendViewResource(
						info,
						self.customer.clientId,
						res => {
							console.log('share Resource with url', res);
							self.$Message.success(self.$t('session.success'));
							let msg = sendMessageToRecord('view', { cmd: 'view', data: info }, self.agent);
							console.log(msg);
							self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
						},
						error => {
							console.log(error);
							self.$Message.error(error);
						}
					);
					console.log(this.$refs.SendLink.linkurl);
				},
				onCancel() {}
			});
		},

		onHandWriting() {
			ivcs.agent.onHandWriting(data => {
				console.log('onHandSignature,,', data);
				if (data.data.data && data.data.status === 'in-progress') {
					imchat.$emit('handWriting', data.data.data.stroke);
				} else if (data.data.status === 'done') {
					let result = {};
					result.type = 'pic';
					result.url = data.data.data.url;
					result.name = data.data.data.name;
					result.status = data.data.status;
					let msg = sendMessageToRecord('get-handwriting', { cmd: 'get-handwriting', data: result }, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				} else if (data.data.status === 'accepted') {
					this.showHandSignTrajectory(data);
				}
			});
		},

		//签名
		handSign() {
			ivcs.agent.inviteHandWriting(
				undefined,
				this.customer.clientId,
				res => {
					console.log('requestHandSignature,success', res);
					this.$Message.success(this.$t('session.success'));
					let msg = sendMessageToRecord('get-handwriting', { cmd: 'get-handwriting', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				},
				error => {
					console.log('requestHandSignature,error', error);
					this.$Message.error(error);
				}
			);
		},

		/*显示访客手写轨迹*/
		showHandSignTrajectory() {
			var self = this;
			this.$Modal.info({
				title: self.$t('ivcs.handsigning'),
				render: h => {
					return h(RemoteHandSign, {
						ref: 'RemoteHandSign'
					});
				},
				width: 400,
				closable: false,
				okText: self.$t('ivcs.close'),
				cancelText: self.$t('ivcs.No'),
				onOk() {
					self.isHandSign = false;
				},
				onCancel() {}
			});
		},

		/*共享屏幕标注*/
		screenMark() {
			if (this.customerClientInfo === 'mini') {
				this.$Message.info(this.$t('mini.notSupport'));
				return;
			}
			// this.sendMessageRecord('startMark', this.$t('chat.startMark'));
			ivcs.agent.screenMark(
				undefined,
				this.customer.clientId,
				res => {
					this.cmdData.set('screen-mark', res.cmdId);
					let msg = sendMessageToRecord('peer-cmd', { cmd: 'screen-mark', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
					console.log('send screenMark success', res);
					this.$Message.success(this.$t('session.success'));
				},
				error => {
					console.log('send screenMark error', error);
					this.$Message.error(error);
				}
			);
			ivcs.agent.renderStream(
				this.screenStreamLabel,
				'screenmark',
				() => {
					this.showScreenMarkView = true;
					this.writingShow = true;
					message.$on('sendScreenMarkWhiteboard', message => {
						this.startScreenMark(message);
					});
				},
				error => {
					console.log('render screen mark error', error);
					this.sendMessageRecord('system_msg', 'render screen mark error', error);
					this.$Message.error(error);
				},
				onPlayError => {
					console.log('render onPlayError', onPlayError);
				},
				onEnded => {
					console.log('render onEnded', onEnded);
					if (this.cmdData.get('screen-mark')) {
						this.closeScreenMark();
					}
					this.stopScreenShare();
				}
			);
		},

		closeScreenMark() {
			this.writingShow = false;
			this.showScreenMarkView = false;
			this.stopScreenMark();
		},

		startScreenMark(code) {
			let result = {};
			result.track = code;
			this.sendMessageRecord('mark_trace', result);
		},

		//停止共享标注
		stopScreenMark() {
			let cmdId = this.cmdData.get('screen-mark');
			ivcs.agent.cancelScreenMark(
				cmdId,
				this.customer.clientId,
				res => {
					this.cmdData.delete('screen-mark');
					console.log('stop screenMark success', res);
					let msg = sendMessageToRecord('peer-cancel', { cmd: 'screen-mark', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				},
				error => {
					console.log('stop screenMark error', error);
				}
			);
		},

		getlocation() {
			if (this.isLocationing) {
				return;
			}
			ivcs.agent.requestCustomerLocation(
				undefined,
				this.customer.clientId,
				res => {
					this.isLocationing = true;
					console.log('request location success', res);
					this.$Message.success(this.$t('session.success'));
					let msg = sendMessageToRecord('get-geo-location', { cmd: 'get-geo-location', data: {} }, this.agent);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				},
				error => {
					console.log('request location error', error);
					this.$Message.error(this.$t('session.error'));
				}
			);
		},

		//停止扫码
		stopSendScanner() {
			let cmdId = this.cmdData.get('scan-code');
			let data = {};
			data.cmd = 'scan-code';
			data.type = 'peer-cancel';
			let msg = sendMessageToRecord('peer-cancel', { cmd: 'scan-code', data: {} }, this.agent);
			this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
			ivcs.agent.cancelCustomerScanCode(
				cmdId,
				this.customer.clientId,
				res => {
					this.isScannerCode = false;
					console.log('cancelCustomerScanCode success', res);
				},
				error => {
					console.log('cancelCustomerScanCode error', error);
				}
			);
		},

		//推送扫码
		sendScanner() {
			let self = this;
			ivcs.agent.requestCustomerScanCode(
				undefined,
				this.customer.clientId,
				res => {
					this.isScannerCode = true;
					console.log('scanCode success', res);
					self.cmdData.set('scan-code', res.cmdId);
					self.$Message.success(self.$t('session.success'));
					let data = {};
					data.cmd = 'scan-code';
					let msg = sendMessageToRecord('scan-code', { cmd: 'scan-code', data: {} }, self.agent);
					self.$store.commit('SET_MESSAGE_DATA', [...self.messageData, msg]);
				},
				error => {
					console.log('scanCode error', error);
					self.$Message.error(self.$t('session.error'));
				}
			);
		},

		//接收访客扫码的过程/结果
		onScanCode() {
			ivcs.agent.onScanCode(data => {
				console.log('onScanCode', data);
				let result = {};
				result.cmd = 'scan-code';
				result.type = 'peer-response';
				if (data.data.status === 'rejected') {
					this.isScannerCode = false;
					result.record = `拒绝扫码`;
					let msg = sendMessageToRecord('scan-code', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				} else if (data.data.status === 'done') {
					this.isScannerCode = false;
					if (data.data.data.type === 'qr-code') {
						result.record = `扫码成功,二维码链接:${data.data.data.code}`;
						if (data.data.data.code.indexOf('http') != -1 || data.data.data.code.indexOf('https') != -1) {
							this.showRemotelink = true;
							this.remotelinkurl = data.data.data.code.replace(/^http:/, 'https:');
						}
					} else {
						result.record = `扫码成功,条形码:${data.data.data.code}`;
					}

					let msg = sendMessageToRecord('scan-code', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				}
			});
		},

		//接收访客填写的表单过程/结果
		onFillForm() {
			ivcs.agent.onFillForm(data => {
				console.log('onFillForm', data);
				if (data.data.status === 'done') {
					this.updateFormRecord('success', 'ok');
					this.$refs.agentop.nowSendFormStatus = this.$refs.agentop.sendFormStatus.start;
					let msg = sendMessageToRecord('fill-form', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				} else if (data.data.status === 'failed') {
					this.updateFormRecord('fail', 'reject');
					this.$refs.agentop.nowSendFormStatus = this.$refs.agentop.sendFormStatus.start;
					let msg = sendMessageToRecord('fill-form', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				} else if (data.data.status === 'rejected') {
					this.$refs.agentop.nowSendFormStatus = this.$refs.agentop.sendFormStatus.start;
					let msg = sendMessageToRecord('fill-form', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				}
			});
		},

		//接收访客获取地理位置的过程/结果
		onGeoLocation() {
			ivcs.agent.onGeoLocation(data => {
				console.log('onGeoLocation', data);

				if (data.data.status === 'done') {
					this.isLocationing = false;
					let address = data.data.data.address;
					this.customerLocaltion = address;
					let msg = sendMessageToRecord('get-geo-location', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
					sumbitLocation(this.sessionId, address)
						.then(res => {
							console.log(res);
							this.$store.state.formId = res.data.formId;
						})
						.catch(error => {
							console.log(error);
						});
				} else {
					this.isLocationing = false;
					let msg = sendMessageToRecord('get-geo-location', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				}
			});
		},

		//接收访客的截图过程/结果
		onScreenShot() {
			ivcs.agent.onScreenShot(data => {
				if (data.data.status === 'done') {
					let msg = sendMessageToRecord('get-screenshot', data, this.customer);
					this.$store.commit('SET_MESSAGE_DATA', [...this.messageData, msg]);
				}
			});
		},

		/*获取用户刚开始进来提交的表单信息*/
		dealWithCustomerSendMessage() {
			let formId = this.$store.state.formId;
			console.log(formId);
			if (formId != '' && formId !== '-1') {
				//-1判断适配安卓端访客呼叫未提交资料
				this.getCustomerInfoFormData();
			} else {
				this.$Notice.success({
					title: this.$t('ivcs.confirm'),
					desc: this.$t('ivcs.customernotsubmit'),
					duration: 10
				});
			}
		},

		/** 获取访客提交的个人信息*/
		getCustomerInfoFormData() {
			let formId = this.$store.state.formId;
			let self = this;
			return new Promise((resolve, reject) => {
				getuserforminfo(formId)
					.then(resp => {
						if (resp.data.code === 200) {
							this.customerInfo = resp.data.data;
							this.$store.state.customerSubmitInfo = resp.data.data;
						}
						resolve(resp);
					})
					.catch(function(error) {
						self.sendMessageRecord('system_msg', 'get customer user info error', error);
						console.log('get customer user info error', error);
						reject(error);
					});
			});
		},
		/*移动*/
		bindMove(self) {
			self.$nextTick(() => {
				const div = self.$refs.div;
				div.onmousedown = function(e) {
					// 当前屏幕宽高
					// var clientWidth = document.documentElement.clientWidth;
					// var winHeight = document.documentElement.clientHeight;
					var disx = e.pageX - div.offsetLeft;
					var disy = e.pageY - div.offsetTop;
					document.onmousemove = function(e) {
						// var left = e.pageX - disx;
						// var top = e.pageY - disy;
						div.style.left = e.pageX - disx + 'px';
						div.style.top = e.pageY - disy + 'px';
					};
					document.onmouseup = function() {
						document.onmousemove = document.onmouseup = null;
					};
				};
				div.oncontextmenu = function(e) {
					// 点击鼠标右键， 视频框恢复原位
					div.style.left = '25%';
					div.style.top = '62px';
					console.log(e);
					return false;
				};
			});
		},

		/*页面关闭异常处理*/
		async pageClose() {
			this.sessionId ? this.hangUp() : undefined;
			this.agentStatus.logged ? this.logOut() : undefined;
		},

		//业务指令初始化
		businessInit() {
			this.onScanCode();
			this.onGeoLocation();
			this.onFillForm();
			this.onScreenShot();
			this.onHandWriting();
		}
	}
};
</script>

<style scoped>
.headset-btn {
	border: 0;
	background-color: transparent;
	outline: none;
}
.headtitle {
	float: left;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	margin-right: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
/* .headtitle span {
    padding: 0 4px;
  } */
.toast img {
	width: 14px;
	height: 17px;
	margin-right: 13px;
}
.toast {
	float: right;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	opacity: 0.85;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 89px;
}
.headsetImg {
	width: 24px;
	height: 24px;
	display: flex;
}
.headsetImg img {
	width: 100%;
}
.headsetImg:hover .baseinfo {
	display: block;
}
.headset button {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	margin-right: 20px;
	cursor: pointer;
}
.headset {
	float: right;
	display: flex;
	justify-content: center;
	align-items: center;
}
.baseinfo {
	min-width: 102px;
	height: 74px;
	background: #ffffff;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);
	position: absolute;
	top: 78px;
	right: 20px;
	z-index: 999;
	padding-top: 13px;
	padding-left: 17px;
	padding-right: 6px;
	text-align: left;
	display: flex;
	flex-direction: column;
	line-height: 2;
	z-index: 1999;
	display: none;
}

.horizontalline {
	display: inline-block;
	width: 34px;
	height: 2px;
	background: #ffffff;
	border-radius: 1px;
	margin-top: -18px;
}
.headop {
	float: right;
	margin-right: 10px;
	margin-top: 17px;
}

.z-headop {
	float: right;
	margin-right: 10px;
	/*width: 1000px;*/
	height: 50px;
	margin-top: 7px;
}

.headbtn {
	width: 120px;
	height: 30px;
	border: 1px solid rgba(125, 179, 236, 1);
	border-radius: 4px;
	line-height: 30px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

.headopgray {
	float: right;
	margin-right: 10px;
	margin-top: 17px;
	background-color: #2c3e50;
	color: white;
}

.setting {
	float: right;
	margin-right: -20px;
	margin-top: 20px;
	width: 25px;
	height: 25px;
	cursor: pointer;
}

.op {
	display: flex;
	flex-direction: row;
	align-content: space-between;
	align-items: flex-start;
}

.aiop {
	width: 100%;
	height: 120px;
	/*border: 0.5px solid #2b85e4;*/
	margin-top: 20px;
	border-radius: 10px;
}

/*.customervideo{*/
/*width: 100%;*/
/*height: 360px;*/
/*}*/

.totalvideo {
	width: 100%;
	height: 360px;
}

.halfvideo {
	width: 50%;
	height: 360px;
}

/*.videoshow{*/
/*position: relative;*/
/*width: 40%;*/
/*height: 360px;*/
/*left: 30%;*/
/*background-color: #515a6e;*/
/*top: 64px;*/
/*}*/

.aivideo {
	position: absolute;
	width: 200px;
	height: 150px;
	z-index: 100;
	margin-left: -50%;
	background-color: #515a6e;
}

.ai2video {
	position: absolute;
	width: 200px;
	height: 150px;
	z-index: 100;
	margin-left: -50%;
	margin-top: 150px;
	background-color: #515a6e;
}

.aiaudeo {
	position: absolute;
	width: 200px;
	height: 20px;
	z-index: 100;
	margin-left: -50%;
	background-color: #515a6e;
}

.ai2audio {
	position: absolute;
	width: 200px;
	height: 20px;
	z-index: 100;
	margin-left: -50%;
	margin-top: 150px;
	background-color: #515a6e;
}

.aihalfvideo {
	position: absolute;
	width: 200px;
	height: 150px;
	z-index: 100;
	margin-left: -50%;
	background-color: #515a6e;
}

.col {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	margin-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
}

.img {
	width: 40px;
	height: 40px;
}

.videoshow {
	width: 40%;
	position: absolute;
	cursor: move;
	z-index: 5;
	left: 32%;
	top: 120px;
	background-color: rgba(249, 249, 249, 1);
}

.customervideo {
	width: 100%;
	height: 350px;
	object-fit: contain;
	overflow-y: hidden;
}

.customer_video_hidden {
	width: 1px;
	height: 1px;
	object-fit: contain;
}

.default_customer_voice {
	width: 90%;
	height: 350px;
	object-fit: cover;
	z-index: 3;
}

.defaultcustomer {
	width: 95%;
	height: 350px;
	background-color: white;
}

.customerrenwu {
	width: 200px;
	height: 200px;
	margin-top: 75px;
}
.defaultagent {
	width: 100%;
	height: 350px;
}

.agentdiv {
	width: 160px;
	height: 120px;
	margin: 0 auto;
	margin-top: 20px;
	background: rgba(249, 249, 249, 1);
}

.agentrenwu {
	width: 80px;
	height: 80px;
	margin-top: 20px;
}

.otherStream {
	width: 40%;
	height: 350px;
	background: rgba(255, 255, 255, 1);
	/*border-radius:10px;*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;
	overflow: auto;
}
.backdemon {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 1);
	width: 85%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
	height: 100px;
	filter: alpha(opacity = 60); /*设置透明度为60% */
	opacity: 0.47; /*非IE浏览器下设置透明度为60%*/
	z-index: 999;
	margin-left: 10%;
	margin-top: 10px;
	display: none;
}
.otherStreamContent:hover .backdemon {
	display: block;
}
.otherStreamContent:hover .kick {
	display: block;
}
.kick {
	width: 44px;
	height: 44px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	line-height: 44px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 1200;
}
.kick:hover {
	background: #3a98ff;
}

.otherStreamvideo {
	width: 90%;
	height: 100px;
	margin-left: 5%;
	margin-top: 10px;
}

.agent_voice_img {
	width: 206px;
	height: 146px;
	margin-top: 10px;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.settingview {
	/*width: 200px;*/
	/*height: 2000px;*/
	/*float: right;*/
	position: absolute;
	right: 50px;
	top: 70px;
	z-index: 100;
}

.screenmark {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
}

.handsign {
	width: 50%;
	height: 500px;
	left: 50%;
	position: fixed;
	z-index: 10;
}
.disappear {
	display: none;
}

.screensync-container {
	z-index: 10000;
	position: absolute;
	top: 65px;
	width: 100%;
	height: calc(100% - 65px);
	pointer-events: none;
}

.screensync-wraper {
	overflow: hidden;
	border: 1px solid #dcdee2;
	background-color: #f8f8f9;
	border-radius: 5px;
	overflow-y: auto;
	height: calc(100% - 30px);
}
.screensync-title {
	height: 30px;
	background-color: #e3e5e8;
	cursor: move;
	display: flex;
	line-height: 30px;
	justify-content: center;
	pointer-events: auto;
}
.screensync-stop {
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	right: 10px;
}

.screensync-stop-image {
	width: 10px;
	height: 10px;
}
</style>
